CSS3的變形處理-筆記

在qq空間，點擊右側欄目的小圖標，都會順時針一個角度。

其中就是運用變形功能，css3中transform可以實現文字或圖像的旋轉、縮放、傾斜和移動。

旋轉寫法（以chrome爲例）：

-webkit-transform:rotate(30deg);順時針旋轉30度

縮放：

-webkit-transform:scale(0.5);縮小50%，0.5是縮放倍率

可以指定水平和垂直方向的縮放倍率

傾斜:

-webkit-transform:skew(30deg,30deg);水平和垂直方向上傾斜爲30度。

若其中只有一個缺省參數，則只有一個水平傾斜。

移動：

-webkit-transform:translate(50px,50px);水平方向上移動50px，垂直方向上移動50px。

同樣，若其中只有一個缺省參數，則只有一個水平移動。

變形處理，可以以上寫法，也可以-webkit-transform:translate(50px,50px) rotate(30deg) scale(0.5);

會順序執行以上屬性設置，先移動，後旋轉，再縮放。順序可以顛倒，但是順序不一樣也會導致效果不一樣。

在處理變形時，可以設置以元素的中心點爲基準點進行，

-webkit-transform-origin:left bottom;根據元素的左下角爲基準點進行變形

兩個參數分別水平方向上的位置：left,center,right,垂直方向上的位置：top,center,bottom

備註：屬性都是針對2d設置，有些屬性可以對3d設置（就是多了一個方向設置）。