|
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 (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> <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,能创造出更炫的效果。
|