Style transformOrigin
Property
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