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度*/