总结CSS3变形transform属性

　　在网页设计中，css被习惯于理解为擅长表现静态样式，动态的元素必须借助于flash或javascript才可以实现，CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外，还提供了对动画的支持，可以实现旋转，缩放，移动，倾斜和过渡效果等等，这些功能再一次证明了CSS功能的强大和无限潜能。

　　CSS3实现元素变形的基础。来源于新增的transform属性，该元素可用于实现元素的旋转，缩放，移动，倾斜等效果。目前webkit引擎支持-webkit-transform私有属性，Mozilla Geckos引擎支持-moz-transform私有属性，Presto引擎支持-o-transform私有属性，IE浏览器支持-ms-transform私有属性。

　　CSS3 transform都有哪些常用属性？

transform的属性包括：rotate() / skew() / scale() / translate() ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

　　各个属性的用法：

　　

transform:rotate(angle)：

含义：通过接受一个单位为deg的旋转角度，对指定元素旋转一定的幅度，角度为正时为顺时针。

.demo_transform1{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg)
}

transform:skew(angleX,angleY)：

含义：定义元素在二维空间的倾斜变形。angleX,Y表示元素在空间XY轴上的倾斜角度，角度单位为deg。角度为正时为顺时针旋转。若Y省略，说明垂直方向上的倾斜角度默认为0deg。

.demo_transform2{
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg)；
}

transform:scale(x,y)：

含义：实现元素在二维空间的缩放和翻转，两个参数值用来定义宽和高的缩放比例。x,y取值可谓整数、小数、负数，取值为负时，元素会被翻转。如果y省略，则垂直和水平方向缩放倍数相同。

.demo_transform3{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}

transform:translate(dx,dy)：

含义：定义元素相对于原来坐标发生的偏移。xy分别表示元素在水平和垂直方向的位移。

.demo_transform4{
-webkit-transform:translate(120px,0);
-moz-transform:translate(120px,0)
}

　　transform属性演示点击链接：点此查看实例展示