CSS3 transform-origin property
Set the base point position of the rotating element:
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
Try it out . . .
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
Attributes | |||||
---|---|---|---|---|---|
transform-origin
(two-value syntax) |
36.0
4.0 -webkit- |
10.0
9.0 -ms- |
16.0
3.5 -moz- |
9.0
3.2 -webkit- |
23.0
15.0 -webkit- 10.5 -o- |
transform-origin
(three-value syntax) |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
Description of property definition and use
The transform-Origin property allows you to change the position of the converted element.
2D conversion elements can change the X and Y axes of an element. 3D transforms the element, and you can also change the Z-axis of the element.
To better understand transform-Origin properties, check out this demo .
Note: You must first use the transform property to use this property.
Tip: Safari/Chrome users: To better understand the 3D conversion property, check out the demo .
Default: | 50% 50% 0 |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.transformOrigin="20% 40%" |
Grammar
Value | Describe |
---|---|
x-axis |
Define where the view is placed on the X-axis. Possible values:
|
y-axis |
Define where the view is placed on the Y-axis. Possible values:
|
z-axis |
Define where the view is placed on the Z-axis. Possible values:
|