CSS动画-2D变换-transform实现旋转、缩放、平移、倾斜

1.1 transform的基本属性值
在CSS3中提供了transform和transform-origin两个用于实现2D变换的属性，其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换，transform-origin用于设置中心点的变换；

1.2 应用transform属性实现旋转

应用transform属性的rotate（）函数分别实现顺时针旋转30°和逆时针旋转30°，关键代码如下：

#rotate{
 -moz-transform:rotate(30deg);    /*Firefox下顺时针旋转30度*/
 -webkit-transform:rotate(30deg);   /*Chrome下顺时针旋转30度*/
 -o-transform:rotate(30deg);    /*Opera下顺时针旋转30度*/
 -ms-transform:rotate(30deg);    /*IE下顺时针旋转30度*/

逆时针旋转

#rotate1{
  left:300px;
 -moz-transform:rotate(-30deg);    /*Firefox下逆时针旋转30度*/
 -webkit-transform:rotate(-30deg);   /*Chrome下逆时针旋转30度*/
 -o-transform:rotate(-30deg);    /*Opera下逆时针旋转30度*/
 -ms-transform:rotate(-30deg);    /*IE下逆时针旋转30度*/