Easy Tutorial
❮ Prop Doc Baseuri Jsref Splice ❯

Style transformOrigin Property

Style Object

Example

Set the base point position for rotating elements:


Definition and Usage

The transformOrigin property allows you to change the position of transformed elements.

2D transformation elements can change the element's X and Y axes. 3D transformation elements can also change the element's Z axis.

Note: This property must be used together with the transform property.


Browser Support

Internet Explorer 10, Firefox, and Opera support the transformOrigin property.

Internet Explorer 9 supports an alternative property, msTransformOrigin (for 2D transformations only).

Chrome, Safari, and Opera support an alternative property, WebkitTransformOrigin (for both 3D and 2D transformations).


Syntax

Return the transformOrigin property:

Set the transformOrigin property:

Property Values

Value Description
x-axis Defines where the view is placed on the X axis. Possible values: left<br> center<br> right<br> length<br> %
y-axis Defines where the view is placed on the Y axis. Possible values: top<br> center<br> bottom<br> length<br> %
z-axis Defines where the view is placed on the Z axis (for 3D transformations). Possible values: length
initial Sets this property to its default value. See initial
inherit Inherits this property from its parent element. See inherit

Technical Details

Default value: 50% 50% 0
Return value: String, representing the transform-origin property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

JavaScript Style Object: transform Property

CSS Reference: transform-origin Property


Style Object

❮ Prop Doc Baseuri Jsref Splice ❯