Style transformOrigin Property
Style ObjectExample
Set the base point position of the rotated element:
Try it Yourself »
Definition and Usage
The transformOrigin property allows you to change the position of transformed elements.
2D transformed elements can change the X and Y axes of the element. 3D transformed elements can also change the Z axis of the element.
Note:This property must be used together with thetransformproperty.
Browser Support
Internet Explorer 10, Firefox, and Opera support the transformOrigin property.
Internet Explorer 9 supports an alternative property, namely the msTransformOrigin property (only for 2D transforms).
Chrome, Safari, and Opera support an alternative property, namely the WebkitTransformOrigin property (can be used for 3D and 2D transforms).
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:
|
| y-axis | Defines where the view is placed on the Y axis. Possible values:
|
| z-axis | Defines where the view is placed on the Z axis (for 3D transforms). Possible values:
|
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | 50% 50% 0 |
|---|---|
| Return value: | A string representing the transform-origin property of the element. |
| CSS Version | CSS3 |
Related Articles
JavaScript Style Object:transform property
CSS Reference Manual:transform-origin property
Other Extensions