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