.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%; } #clock{ width: 200px; height: 200px; border: 1px solid black; border-radius: 100px; position:relative; margin:0 auto; background-color:#eee; } #dot{ border-radius:2px; width: 8px; height: 8px; position:absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0; background: black; } .needle { -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin:50% 100%; } #second{ position:relative; z-index:5; height: 80px; width: 1px; margin: 20px auto; } #second_needle{ height: 100%; width: 100%; position: relative; background: green; } #minute{ z-index:4; height: 60px; width: 4px; position: absolute; top: 40px; left: 0px; right: 0px; margin: auto; } #minute_needle{ height: 100%; width: 100%; background: blue; } #hour{ z-index:3; height: 40px; width: 8px; position: absolute; top: 60px; left: 0px; right: 0px; margin: auto; } #hour_needle{ height: 100%; width: 100%; background: red; }

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：