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 */} |
<font color="#c0504d">1.1 transform</font> |
语法:transform: none|<i>transform-functions</i>; |
说明: |
|
Value |
Description |
|
none |
定义这不需要转换 |
|
matrix(n,n,n,n,n,n) |
使用有6个值的矩阵(matrix)来定义一个 2D 转换 |
|
matrix3d |
使用有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 |
|
|
y-axis |
定义Y轴的转换位置. 可能的值有:
|
|
z-axis |
定义Z轴的转换位置. 可能的值有:
|
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><pre class="brush: xml; auto-links: true; collapse: false; first-line: 1; gutter: false; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: false;"><div class="panal"><div></div><div class="tr"></div></div></pre> |
在我之前的一篇博文利用Transform结合javascript做的动态时钟，下面再给展现一个带有动态效果的DEMO：
有兴趣的同学去我这篇博文中查看相关源码。
下面展现一个我从webkit官网上找到的一个Transform DEMO:
在下一篇博文中,我将讲解CSS3中的动画(animations),结合它transform,能创造出更炫的效果。