CSS3 變形語法：Transform 教學

在CSS時代針對版面物件只能進行寬度大小距離調整，無法對物件進行形狀調整，伴隨著著CSS3的出現，現在要制定各種物件的變形效果直接可以套用CSS3的各種變形參數來達成，基本上已經可以做出媲美FLASH的各種基本漸變效果了 !

例如本工作室首頁的最新主題列表標題就是利用了變形效果搭配動作語法來實現的


　　　　　　　　


或是搭配CSS3的漸變指令達到此效果 → DEMO

OK現在就先來了解一下CSS3的Transform語法效果，Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：

旋轉rotate、扭曲skew、縮放scale、移動translate、矩陣變形matrix(進階)

下面我們一起來看看CSS3中transform的旋轉rotate、扭曲skew、縮放scale和移動translate如何運用

1、旋轉rotate
rotate(角度) ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基準點。而角度的部分，如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。

範例：transform: rotate(30deg);



2、X位移
translateX(<translation-value>) ： 通過給定一個X方向上的指定值，使物件向x軸進行移動，其基準點是元素的中心點，也可以透過 transform-origin 來改變基準點位置。

範例：transform:translateX(100px):


2、Y位移
translateY(<translation-value>) ：通過給定一個X方向上的指定值，使物件向Y軸進行移動，其基準點是元素的中心點，也可以透過 transform-origin 來改變基準點位置。

範例：transform:translateY(100px):


4、縮放scale
縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。下面我們具體來看看這三種情況具體使用方法：

scale(x參數，y參數)：其中X參數表示水平方向縮放的倍數，Y參數表示垂直方向的縮放倍數，而Y參數是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。並以X為準。同樣基準點在元素中心點位置，可以通過transform-origin對元素的基準點進行設置。
範例：transform:scale(2,1.5):

指定單一Ｘ軸Ｙ軸縮放：
scaleX(<number>) ：範例：transform:scaleX(2): →讓物件X軸放大兩倍scaleY(<number>) ：範例：transform:scaleY(2):→讓物件Y軸放大兩倍

5、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下：

skew( 角度 , 角度 ) ：第一個參數對應X軸，對應水平方向扭曲角度；第二個參數對應Y軸，對應垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那麼Y軸為0deg。同樣是以元素中心為基準點，我們也可以通過transform-origin來改變元素的基準點位置。

範例：transform:skew(30deg,10deg):

skewX(<angle>) ： skewX是使元素以其中心為基點，在水平方向（X軸）進行扭曲變行，同樣可以通過transform-origin來改變元素的基點。範例：transform:skewX(30deg)

skewY(<angle>) ： skewＹ是使元素以其中心為基點，在垂直方向（Ｙ軸）進行扭曲變行，同樣我們可以通過transform-origin來改變元素的基點。範例：transform:skewY（10deg）

六、矩陣matrix - 此屬性值使用涉及到數學中的矩陣規則，有興趣的朋友可以更進階去查找相關資料，這裡就先帶過了。




最後特別說明一下，Transform在各瀏覽器的使用語法 (這幾家瀏覽器倒底什麼時候才肯統一標準化Orz)
Mozilla內核瀏覽器：firefox3.5+

1. -moz-transform: rotate | scale | skew | translate ;

複製代碼

Webkit內核瀏覽器：Safari and Chrome

1.   -webkit-transform: rotate | scale | skew | translate ;

複製代碼

Opera

1. -o-transform: rotate | scale | skew | translate ;

複製代碼

IE9

1. -ms-transform: rotate | scale | skew | translate ;

複製代碼

W3C標準

1. transform: rotate | scale | skew | translate ;
   

複製代碼

備註：IE9以下的版本並不相容CSS3的語法，若在網站實際使用時記得請使用者更新瀏覽器喔