css3开发：2D变形功能总结

一、基本操作

1.旋转：

transform：rotate（顺时针旋转的度数）；

2.缩放

transform：scale（水平方向缩放的比例，垂直方向缩放的比例）；

3.倾斜

transform：skew（水平方向上倾斜的角度，垂直方向上倾斜的角度）；

4.移动

transform:translate(水平方向上偏移的距离，垂直方向上偏移的距离);

5.matrxi方法把以上的方法合而为一，具体的方法如下所示：

transform:matrxi(顺时针旋转的度数，水平缩放的比例，垂直缩放的比例，水平方向顺时针倾斜的角度，水平方向便宜的角度，垂直方向偏移的角度);

例子：

div {

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

}

值得注意的是，目前各大主流的浏览器还对css3的主流动画效果还没有达成一致的开发标准，所以需要处理他的兼容性问题。

比如处理移动：

.Div{

    各种属性

    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */

}

其他类似都要加上前缀。
 

二、多种变形操作