Style transformOrigin 属性
Style 对象的 transformOrigin 属性允许开发改变被转换元素的位置
2D 转换元素能够改变元素 X 和 Y 轴
3D 转换元素还能改变元素的 Z 轴
该属性必须与 transform 属性一起使用
语法
返回 transformOrigin 属性
object.style.transformOrigin
设置 transformOrigin 属性
object.style.transformOrigin=" x-axis y-axis z-axis |initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值： left center right length % |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值： top center bottom length % |
| z-axis | 定义视图被置于 Z 轴的何处（用于 3D 转换）。可能的值：length |
| initial | 设置该属性为它的默认值。可以阅读 initial |
| inherit | 从父元素继承该属性。可以阅读 inherit |
默认值
50% 50% 0
返回值
字符串，表示元素的 transform-origin 属性
浏览器支持
Internet Explorer 10、Firefox 和 Opera 支持 transformOrigin 属性
Internet Explorer 9 支持另一个可替代该属性的属性，即 msTransformOrigin 属性 ( 只用于 2D 转换 )
Chrome、Safari 和 Opera 支持另一个可替代该属性的属性，即 WebkitTransformOrigin 属性 ( 可用于 3D 和 2D 转换 )
范例
设置旋转元素的基点位置
document.getElementById("myDIV").style.transformOrigin="0 0";
相关知识
JavaScript Style 对象： transform 属性
CSS 参考手册： transform-origin 属性