# CSS3 transform-origin 属性 ## 实例 设置旋转元素的基点位置： ``` div { 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 和 Chrome */ -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ } ``` 页面底部有更多实例。 ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。 Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。 ## 定义和用法 transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。 为了更好地理解 transform-origin 属性，请查看这个[演示](/example/css3/demo_css3_transform-origin.html)。 Safari/Chrome 用户：为了更好地理解 transform-origin 属性用于 3D 转换的情况，请查看这个[演示](/example/css3/demo_css3_transform-origin_3D.html)。 注释：该属性必须与 [transform](/cssref/pr_transform.asp "CSS3 transform 属性") 属性一同使用。 为了更好地理解 transform 属性，请查看这个[演示](/example/css3/demo_css3_transform.html)。 | 默认值： | 50% 50% 0 | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 语法： | _object_.style.transformOrigin="20% 40%" | | --- | --- | ## 语法 ``` transform-origin: _x-axis_ _y-axis_ _z-axis_; ``` | 值 | 描述 | | --- | --- | | x-axis | 定义视图被置于 X 轴的何处。可能的值： * left * center * right * _length_ * _%_ | | y-axis | 定义视图被置于 Y 轴的何处。可能的值： * top * center * bottom * _length_ * _%_ | | z-axis | 定义视图被置于 Z 轴的何处。可能的值： * _length_ | ## 相关页面 CSS3 教程：[CSS3 2D 转换](/css3/css3_2dtransform.asp "CSS3 2D 转换") CSS3 教程：[CSS3 3D 转换](/css3/css3_3dtransform.asp "CSS3 3D 转换")