CSS3 transform-origin Property
Example
Set the base point position for rotating elements:
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The numbers following -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| transform-origin <br>(two-value syntax) | 36.0 <br>4.0 -webkit- | 10.0 <br>9.0 -ms- | 16.0 <br>3.5 -moz- | 9.0 <br>3.2 -webkit- | 23.0 <br>15.0 -webkit- <br>10.5 -o- |
| transform-origin <br>(three-value syntax) | 36.0 <br>12.0 -webkit- | 10.0 | 16.0 <br>10.0 -moz- | 9.0 <br>4.0 -webkit- | 23.0 <br>15.0 -webkit- |
Property Definition and Usage
The transform-origin property allows you to change the position of transformed elements.
For 2D transformations, it can change the X and Y axes of the element. For 3D transformations, it can also change the Z axis of the element.
To better understand the transform-origin property, please view this demo.
Note: This property must be used after the transform property.
Tip: Safari/Chrome users: To better understand the 3D transform property, please view this demo.
| Default value: | 50% 50% 0 |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.transformOrigin="20% 40%" |
| --- | --- |
Syntax
| 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. Possible values: length |