transform CSS属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜,平移,旋转,缩放等在二维或三维空间等。
下表为此属性的用法说明和版本历史记录,以及该属性在javascript脚本中的使用语法。
默认值: | none |
---|---|
适用于: | 可变形元素 |
继承: | 没有 |
可动画制作: | 是。请参考 动画属性。 |
版本: | CSS3的新功能 |
JavaScript语法: | object.style.transform="rotate(7deg)" |
该属性的语法如下:
transform: [ transform-function ] 1 or more values | none | initial | inherit
下面的示例演示了如何使用transform属性。
img { -webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */ -moz-transform: translate(200px, 50px); /* Firefox */ -ms-transform: translate(200px, 50px); /* IE 9 */ transform: translate(200px, 50px); }测试看看‹/›
下表描述了此属性的值。
值 | 描述 |
---|---|
translate(tx,ty) | 沿X和Y轴将元素移动给定的数量。 |
translate3d(tx,ty,tz) | 沿X,Y和Z轴将元素移动给定的数量。 |
translateX(tx) | 沿X轴将元素移动给定的数量。 |
translateY(ty) | 沿Y轴将元素移动给定的数量。 |
translateZ(tz) | 沿Z轴将元素移动给定的数量。 |
rotate(a) | 根据transform-origin属性定义,以指定的角度围绕元素的原点旋转元素。 |
rotate3d(x,y,z, a) | 围绕[x,y,z]方向向量,按最后一个参数中指定的角度旋转3D空间中的元素。 |
rotateX(a) | 围绕X轴将元素旋转给定角度。 |
rotateY(a) | 将元素绕Y轴旋转给定角度。 |
rotateZ(a) | 围绕Z轴将元素旋转给定角度。 |
scale(sx,sy) | 按给定数量向上或向下缩放元素的宽度和高度。该功能scale(1,1)无效。 |
scale3d(sx,sy,sz) | 沿X,Y和Z轴按给定的数量缩放元素。该功能scale3d(1,1,1)无效。 |
scaleX(sx) | 沿X轴缩放元素。 |
scaleY(sy) | 沿Y轴缩放元素。 |
scaleZ(sz) | 沿Z轴缩放元素。 |
skew(ax,ay) | 使元素沿X和Y轴倾斜给定角度。 |
skewX(ax) | 使元素沿X轴倾斜给定角度。 |
skewY(ay) | 使元素沿Y轴倾斜给定角度。 |
matrix(n,n,n,n,n,n) | 以包含六个值的转换矩阵的形式指定2D转换。 |
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 以16个值的4×4转换矩阵的形式指定3D转换。 |
perspective(length) | 定义3D变换元素的透视图。通常,随着此函数值的增加,元素将出现在离查看者更远的地方。 |
none | 指定不应用任何变换。 |
initial | 将此属性设置为其默认值。 |
inherit | 如果指定,则关联元素采用其父元素transform的属性值。 |
transform属性浏览器的兼容性,下表中的数字表示支持该属性的浏览器最低版本号;所有主流浏览器均支持该属性。
|
相关属性:backface-visibility,perspective,perspective-origin,transform-origin,transform-style。