HTML DOM Style transformOrigin 属性

admin

Style transformOrigin 属性

设置旋转元素的基点位置:

document.getElementById("myDIV").style.transformOrigin="0 0";


定义和用法

transformOrigin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 X 和 Y 轴。3D 转换元素还能改变元素的 Z 轴。

注意:该属性必须与 transform 属性一起使用。


浏览器支持

HTML DOM Style transformOrigin 属性 HTML DOM Style transformOrigin 属性 HTML DOM Style transformOrigin 属性 HTML DOM Style transformOrigin 属性 HTML DOM Style transformOrigin 属性

Internet Explorer 10、Firefox 和 Opera 支持 transformOrigin 属性。

Internet Explorer 9 支持另一个可替代该属性的属性,即 msTransformOrigin 属性(只用于 2D 转换)。

Chrome、Safari 和 Opera 支持另一个可替代该属性的属性,即 WebkitTransformOrigin 属性(可用于 3D 和 2D 转换)。


语法

返回 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 属性。
CSS 版本 CSS3


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码