CSS3 transform 2D變形效果

　　今天再來跟大家介紹CSS 3的transform 屬性，這個屬性可厲害了，以往網頁上都是方形的排列，如果想要把標題轉個角度，請作圖，要傾斜，還是請作圖，有了這個屬性之後，整個排版都變得更靈活了。

語法說明

標準語法 transform: transform-function;
這邊的transform-function，不像一般的CSS直接填入數值，他有下列不同的方式。

Rotate：旋轉
Scale：縮放
Skew：傾斜
Translate：平移

下面直接來demo給大家看。

DEMO

內容

原本的樣子

內容

旋轉5度

{codecitation style="brush: css;"} 
-webkit-transform: rotate(5deg) ; 
-moz-transform: rotate(5deg) ; 
-o-transform: rotate(5deg) ; 
-ms-transform:rotate(5deg); 
transform:rotate(5deg); 
{/codecitation}

內容

X方向變原來的1.2倍(變寬)，Y方向變原來的0.8倍(變矮)

{codecitation style="brush: css;"} 
-webkit-transform:scale(1.2,0.8); 
-moz-transform:scale(1.2,0.8); 
-o-transform:scale(1.2,0.8); 
-ms-transform:scale(1.2,0.8); 
transform:scale(1.2,0.8); 
{/codecitation}

內容

如果填的是負數的話，就會翻轉，請看內容的字樣現在是反的了

{codecitation style="brush: css;"}
-webkit-transform:scale(-1.2,-0.8); 
-moz-transform:scale(-1.2,-0.8); 
-o-transform:scale(-1.2,-0.8); 
-ms-transform:scale(-1.2,-0.8); 
transform:scale(-1.2,-0.8); 
{/codecitation}

內容

沿X方向傾斜5度

{codecitation style="brush: css;"} 
-webkit-transform:skew(5deg,0); 
-moz-transform:skew(5deg,0); 
-o-transform:skew(5deg,0); 
-ms-transform:skew(5deg,0); 
transform:skew(5deg,0); 
{/codecitation}

內容

沿X方向傾斜5度，沿Y方向傾斜10度。這邊分開寫成skewX及skewY，是因為W3C的文件已經沒有skew(X,Y)了，雖然使用skew(X,Y)目前還是可以正常運行的，不過既然W3C都拿掉了，那我們還是照他的文件走吧。

 {codecitation style="brush: css;"} 
-webkit-transform:skewX(5deg);
-webkit-transform:skewY(10deg); 
-moz-transform:skewX(5deg); 
-moz-transform:skewY(10deg);
-o-transform:skewX(5deg); 
-o-transform:skewY(10deg); 
-ms-transform:skewX(5deg); 
-ms-transform:skewY(10deg); 
transform:skewX(5deg); 
transform:skewY(10deg); 
{/codecitation}

內容

沿X方向平移50px，沿Y方向平移5px

{codecitation style="brush: css;"} 
-webkit-transform: translate(50px, 25px); 
-moz-transform: translate(50px, 25px); 
-o-transform: translate(50px, 25px); 
-ms-transform: translate(50px, 25px);
transform: translate(50px, 25px); 
{/codecitation}

transform:transform-origin: 0 0;參數

說明：指定變形的原點，第一個值為X座標，第二個為Y座標，可以使用數值、%、方位指示(left,right,top,bottom)等

內容

以左上角為原點，旋轉5度

{codecitation style="brush: css;"} 
-webkit-transform-origin: 0 0; 
-webkit-transform: rotate(5deg); 
-moz-transform-origin: 0 0; 
-moz-transform: rotate(5deg); 
-o-transform-origin: 0 0; 
-o-transform: rotate(5deg); 
-ms-transform-origin: 0 0; 
-ms-transform:rotate(5deg); 
transform:transform-origin: 0 0; 
transform:rotate(5deg); 
{/codecitation}

同時使用多個效果

同時寫入多個效果，用空格隔開，就會依序套用

內容

以中心為原點，先旋轉-5度，再沿X方向縮放為1.2倍，Y方向縮小為0.8倍，最後在沿X方向平移150px，Y方向平移25px;

{codecitation style="brush: css;"} 
-webkit-transform: rotate(-5deg) scale(1.2,0.8) translate(150px, 25px); 
-moz-transform: rotate(-5deg) scale(1.2,0.8) translate(150px, 25px); 
-o-transform: rotate(-5deg) scale(1.2,0.8) translate(150px, 25px); 
-ms-transform:rotate(-5deg) scale(1.2,0.8) translate(150px, 25px); 
transform:rotate(-5deg) scale(1.2,0.8) translate(150px, 25px); 
{/codecitation}

內容

和上面的例子套用一樣的效果，不過套用順序不同，最後的結果會有所差異

{codecitation style="brush: css;"} 
-webkit-transform: translate(150px, 25px) rotate(-5deg) scale(1.2,0.8) ; 
-moz-transform: translate(150px, 25px) rotate(-5deg) scale(1.2,0.8) ;
-o-transform: translate(150px, 25px) rotate(-5deg) scale(1.2,0.8) ; 
-ms-transform:translate(150px, 25px) rotate(-5deg) scale(1.2,0.8) ;
transform:translate(150px, 25px) rotate(-5deg) scale(1.2,0.8) ; 
{/codecitation}

瀏覽器相容性

目前各瀏覽器對transform的相容性如下：

IE：9以上支援
Chrome：4.0以上支援
Firefox：3.5以上支援
Safari：3.1以上支援
Opera：10.5以上支援

網頁設計

關於網頁設計的技術或相關資訊分享