css3 transform 平移,CSS3 transform 属性使用方法及示例

CSS3 transform 属性使用方法及示例

transform CSS属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜，平移，旋转，缩放等在二维或三维空间等。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：none

适用于：可变形元素

继承：没有

可动画制作：

版本：CSS3的新功能

JavaScript语法：object.style.transform="rotate(7deg)"

transform的使用语法

该属性的语法如下：

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属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。

Firefox (2D)3.5 +，(3D)10+ -moz-，16 +

Chrome (2D)4 +，(3D)12+ -webkit-，36 +

Internet Explorer (2D)9 -ms-，10+

Apple Safari (2D)3.2 +，(3D)4+ -webkit-

Opera (2D)10.5+ -o   -，

(2D)(3D)15+   -webkit-，23+

进一步阅读