CSS transform-origin Property
CSS's transform-origin property is used to specify the origin of an element's rotation. It is the center of rotation for an element. It is suitable for both 2D and 3D rotations.
The point around which a transformation is applied is referred to as the transform origin. The transform origin of the rotate() function, for example, is the center of rotation.
This property effectively wraps a pair of translations around the element's other transformations. The first translation shifts the transform origin to its true location at (0,0). The other transformations are then applied, and because the transform origin is at (0,0), they act about the transform origin. Finally, the inverse translation is used to return the transform origin to its
Syntax
Property Values
| Value | Description |
|---|---|
| x-axis |
Defines where the view is placed at the x-axis. Possible values:left
center right length % |
| y-axis |
Defines where the view is placed at the y-axis. Possible values:top
center bottom length % |
| z-axis | Defines the position of the view along the z-axis (for 3D transformations). Possible values include length. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| transform-origin |
36.0
4.0 -webkit- |
16.0
3.5 -moz- |
9.0
3.2 -webkit- |
10.0
9.0 -ms- |
23.0
15.0 -webkit- 10.5 -o- |