CSS3实践之路(五):2D和3D转换(transform)

Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等，利用Transform和javascript可以制作一些简单的动画，可以为web应用带来些意想不到的效果。

目前浏览器并不是完全支持所有的Transform ，IE9、Firefox 和Opera 仅支持2D transforms ，相应的CSS定义为：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都支持2D和3D transforms ，相应的CSS定义为：-webkit-transform 。

下面给出一个transform定义实例：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

1.1 transform

语法:transform: none|transform-functions;

说明:

Value	Description
none	定义这不需要转换
matrix(n,n,n,n,n,n)	使用有6个值的矩阵(matrix)来定义一个 2D 转换
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	使用有4*4的矩阵(matrix)来定义一个 3D 转换
translate(x,y)	定义一个2D 转换,x:水平位移,y:垂直位移,个人觉得和margin-left(left) 和margin-top(top)类似.
translate3d(x,y,z)	定义一个2D 转换,x:水平位移,y:垂直位移,z:Z方向的位移
translateX(x)	定义一个水平方向2D 转换
translateY(y)	定义一个垂直方向2D 转换
translateZ(z)	定义一个Z方向3D 转换
scale(x,y)	定义一个2D 拉伸, x:水平拉伸,y:垂直拉伸
scale3d(x,y,z)	义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸
scaleX(x)	定义一个水平方向拉伸
scaleY(y)	定义一个垂直方向拉伸
scaleZ(z)	定义一个Z方向的拉伸
rotate(angle)	定义一个 2D 旋转, angle :旋转角度(deg)
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轴的2D 倾斜
skewX(angle)	定义一个X轴的2D 倾斜
skewY(angle)	定义一个Y轴的2D 倾斜
perspective(n)	定义一个3D转换效果和透视图

1.2 transform-origin

定义元素旋转的位置，配合transform使用。

语法：transform-origin: x-axis y-axis z-axis;

说明：

Property Value	Description
x-axis	定义X轴的转换位置. 可能的值有: left center right length %
y-axis	定义Y轴的转换位置. 可能的值有: top center bottom length %
z-axis	定义Z轴的转换位置. 可能的值有: length

1.3 transform-style

对于支持3D转换的浏览器，指定元素内的子元素是否进入其3D环境中。

语法：transform-style: flat|preserve-3d;

说明：

Property Value	Description
flat	子元素不参与3D转换
preserve-3d	子元素将显示在3D环境中

实例:

<style type="text/css">
.panal{
	width:500px; border: 1px solid blue; height:200px;
}
.panal div{
	border: 1px solid #6600FF ;width:120px; height:60px; background-color:#CC9900;
}
.tr{
transform: translate(80px, 60px) scale(.75, .75) rotate(40deg);
transform-origin: 60% 100%;
-ms-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
-moz-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);
-moz-transform-origin: 60% 100%;
-webkit-transform: translate(80px, 60px) scale(.75, .75) rotate(40deg);
-webkit-transform-origin: 60% 100%;
-o-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);
-o-transform-origin: 60% 100%;
}
</style>
<div class="panal">
<div></div>
<div class="tr"></div>
</div>

在我之前的一篇博文利用Transform结合javascript做的动态时钟，下面再给展现一个带有动态效果的DEMO：

有兴趣的同学去我这篇博文中查看相关源码。

下面展现一个我从webkit官网上找到的一个Transform DEMO:

在下一篇博文中,我将讲解CSS3中的动画(animations),结合它transform,能创造出更炫的效果。