例
设置旋转元素的基本布局：
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
试一试» 定义和用法
变换-origin属性允许您更改转化元素的位置。
2D变换可以改变元素的x和y轴。 3D转换也可以改变的元件的z轴。
为了更好地理解变换origin属性， 查看演示 。
Note:此属性必须与使用变换属性。
Tip:为了更好地理解这个属性3D变换 ， 观看演示 。
| 默认值： | 50% 50% 0 |
|---|---|
| 遗传： | no |
| 动画： | yes. Read about animatable Try it |
| 版： | CSS3 |
| JavaScript语法： | object .style.transformOrigin="0 0" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-，-moz-，或-O-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 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 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS语法
transform-origin:x-axis y-axis z-axis|initial|inherit;属性值
| 属性值 | 描述 |
|---|---|
| x-axis | 定义了视图被放置在X轴。 可能的值：
|
| y-axis | 定义了视图被放置在Y轴。 可能的值：
|
| z-axis | 定义了视图被放置在z轴(for 3D transformations) 。 可能的值：
|
| 初始 | 将此属性设置为默认值。 阅读关于初始 |
| 继承 | 继承其父元素此属性。 阅读关于继承 |
相关页面
CSS教程： CSS 2D变换
CSS教程： CSS 3D变换
HTML DOM参考： transformOrigin property