最新的Web开发教程
 

Style transform Property

<Style对象

旋转一个div元素:

document.getElementById("myDIV").style.transform = "rotate(7deg)";
试一试»

定义和用法

变换属性应用于一个2D或3D变换的元素。 此属性允许你旋转,缩放,移动,歪斜等元素。


浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

变换属性在Internet Explorer 10和Firefox支持。

互联网浏览器9支持一个替代方案中,msTransform属性(2D transforms only)

歌剧,铬和Safari支持替代,WebkitTransform属性(3D和2D变换)。


句法

返回变换属性:

object .style.transform

设置变换属性:

object .style.transform="none| 属性值
描述
none 定义应该是没有改造
matrix( n,n,n,n,n,n ) 定义了一个2D变换,使用六个值的矩阵
matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n )
限定了3D变换,利用16个值的4×4矩阵
translate( x,y ) 定义一个2D转换
translate3d( x,y,z ) 定义3D平移
translateX( x ) 定义了一个翻译,仅使用值X轴
translateY( y ) 定义一个翻译,只使用Y轴值
translateZ( z ) 定义了一个三维平移,仅使用值的Z轴
scale( x,y ) 定义一个2D缩放转换
scale3d( x,y,z ) 定义一个3D缩放转换
scaleX( x ) 通过给出一个值X轴限定了尺度变换
scaleY( y ) 通过给出对​​于Y轴的值限定了尺度变换
scaleZ( z ) 通过给出一个值的Z轴定义的三维尺度变换
rotate( angle ) 定义了一个二维旋转,该角度在参数指定
rotate3d( x,y,z,angle ) 定义一个3D旋转
rotateX( angle ) 限定沿所述X轴的3D旋转
rotateY( angle ) 限定沿Y轴一3D旋转
rotateZ( angle ) 限定沿Z轴在3D旋转
skew( x-angle,y-angle ) 限定沿X轴和Y轴二维倾斜转换
skewX( angle ) 限定沿所述X轴的二维倾斜转换
skewY( angle ) 限定沿Y轴一2D歪斜变换
perspective( n ) 定义了一个透视图,用于3D变换元件
initial 将此属性设置为默认值。 阅读关于初始
inherit 继承其父元素此属性。 阅读关于继承

技术细节

默认值: 没有
返回值: 一个字符串,表示元素的变换属性
CSS版本 CSS3

相关页面

CSS参考: transform property


<Style对象