網頁設計

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

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以上支援

相關網站

如果覺得還要自己手動處理很麻煩的話,可以到以下網頁
CSS3 maker 點一點,勾一勾,再複製就可以使用了,不過這個網頁沒有不會產生IE的CSS語法以及標準的語法,還請大家要自己加入囉,基本上後面的參數都一樣設定,前面的地方改成-ms就是IE的語法了,都不加單純只有transform的話就是標準的語法

資料搜尋協助:網頁設計;
資料收集協助:網頁設計;

參考網站:W3C CSS Transforms