CSS3 transform-origin property
Examples
Set point position rotary elements:
{
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 */
}
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Attribute definitions and instructions
transform-Origin attribute allows you to change the position of the conversion element.
2D conversion elements can change X and Y-axis elements. 3D conversion element, you can also change the Z-axis element.
To better understand the Transform-Origin attribute, please see the demo .
Note: This property must first transform property.
Tip: Safari / Chrome users: To better understand the 3D transform properties, please see the demo .
| Defaults: | 50% 50% 0 |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.transformOrigin = "20% 40%" |
grammar
| value | description |
|---|---|
| x-axis | Custom View is placed where the X-axis. Possible values:
|
| y-axis | Custom View is placed where the Y-axis. Possible values:
|
| z-axis | Custom View is placed where the Z-axis. Possible values:
|
