CSS3 transform 屬性

CSS3 transform 屬性的功能提供了網頁設計中對於網頁元素（element）變形特效的突破，透過 CSS3 transform 屬性，網頁設計師可以很輕易的讓網頁元素（element）呈現出旋轉（rotate）、縮放（scale）、移動（move）以及傾斜（skew）的特殊效果，讓傳統網頁設計中，需要透過繪圖軟體才能達到的效果，透過 CSS3 transform 屬性快速達成。

不過 CSS3 transform 屬性也有一點小缺點，就是不能一次使用太多，因為 CSS3 transform 屬性的運作方式是讓瀏覽器（Browser）自動計算元素的各個座標位置，進行數學的函數計算，再顯示出變化效果，所以如果一次使用太多在同一個頁面內，會導致瀏覽起來卡卡的，不過這個問題在未來應該會越來越不明顯，畢竟電腦的處理速度也在提升，CSS3 transform 屬性在未來應該會獲得大量使用。

CSS3 transform 屬性語法
transform: transform-function;
CSS 的 transform 屬性有一個參數 transform-function 可以使用，這個參數有非常多種不同的變化，而且也不是隨意設定，CSS3 有特定的參數可以套用，這就是讓網頁元素（element）變形的主要設定方式，我們將參數整理於下表。

CSS3 transform 屬性常用特效參數表
方案參數說明
轉換translate(x,y)由參考點進行 2D 轉換特效，向 x 軸移動 x 距離，Y 軸移動 y 距離。
轉換translate3d(x,y,z)由參考點進行 3D 轉換特效。
轉換translateX(x)定義 X 軸方向的 2D 轉換。
轉換translateY(y)定義 Y 軸方向的 2D 轉換。
轉換translateZ(z)定義 Z 軸方向的 3D 轉換。
縮放scale(x,y)由參考點進行 2D 縮放特效，X 軸方向縮放 x 倍，Y 軸方向縮放 y 倍。
縮放scale3d(x,y,z)由參考點進行 3D 縮放特效。
縮放scaleX(x)定義 X 軸方向的 2D 縮放。
縮放scaleY(y)定義 Y 軸方向的 2D 縮放。
縮放scaleZ(z)定義 Z 軸方向的 2D 縮放。
旋轉rotate(角度)根據設定的角度，以參考點為中心軸進行 2D 旋轉。
旋轉rotate3d(x,y,z,角度)根據設定的角度，以參考點為中心軸進行 3D 旋轉。
旋轉rotateX(角度)沿著 X 軸進行 3D 旋轉所設定的角度。
旋轉rotateY(角度)沿著 Y 軸進行 3D 旋轉所設定的角度。
旋轉rotateZ(角度)沿著 Z 軸進行 3D 旋轉所設定的角度。
傾斜skew(x,y)以參考點為中心，沿著 X 軸方向傾斜 x 度，沿著 Y 軸方向傾斜 y 度。
傾斜skewX(角度)以參考點為中心，沿著 X 軸方向傾斜 x 度。
傾斜skewY(角度)以參考點為中心，沿著 Y 軸方向傾斜 y 度。
矩陣matrix(6個值)利用 6 個值的設定進行 2D 矩陣變化，如 transform:matrix(0,0,0,0,0,0)。
矩陣matrix3d(16個值)利用 16 個值的設定進行 3D 矩陣變化。
為獲得瀏覽器良好支援，須使用瀏覽器前娺
  • -moz-transform：適用於 firefox 瀏覽器。
  • -webkit-transform：適用於 safari, google chrome,opera 等瀏覽器。
  • -o-transform：適用於 opera 瀏覽器。
  • -ms-transform：適用於 ie 瀏覽器。
CSS3 transform 屬性範例一、轉換（translate）的變形特效
<style type="text/css">
#test_translate_0{
    width:300px;
    height:50px;
    background-color:yellow;
}    
#test_translate_1{
    width:300px;
    height:50px;
    background-color:red;
    transform:translate(22px,14px);
    -moz-transform:translate(22px,14px);
    -webkit-transform:translate(22px,14px);
    -o-transform:translate(22px,14px);
    -ms-transform:translate(22px,14px);
    transform:translate(22px,14px);
}    
#test_translate_2{
    width:300px;
    height:50px;
    background-color:blue;
    transform:translate(6px,3px);
    -moz-transform:translate(6px,3px);
    -webkit-transform:translate(6px,3px);
    -o-transform:translate(6px,3px);
    -ms-transform:translate(6px,3px);
    transform:translate(6px,3px);
}    
</style>
<div id="test_translate_0">預設不轉換區塊</div>
<div id="test_translate_1">第一個轉換區塊</div>
<div id="test_translate_2">第二個轉換區塊</div>
範例效果
預設不轉換區塊
第一個轉換區塊
第二個轉換區塊
範例一的紅色與藍色 DIV 區塊分別向 X 軸與 Y 軸方向進行轉換，感覺其實就像是移動位置。

CSS3 transform 屬性範例二、縮放（scale）的變形特效
<style type="text/css">
#test_scale_0{
    width:300px;
    height:50px;
    background-color:yellow;
    margin-bottom:22px;
}    
#test_scale_1{
    width:300px;
    height:50px;
    background-color:red;
    -moz-transform:scale(1,1.5);
    -webkit-transform:scale(1,1.5);
    -o-transform:scale(1,1.5);
    -ms-transform:scale(1,1.5);
    transform:scale(1,1.5);
}   
</style>
<div id="test_scale_0">原始不縮放的區塊</div>
<div id="test_scale_1">使用縮放效果區塊</div>
範例效果
原始不縮放的區塊
使用縮放效果區塊
範例二讓紅色的 DIV 區塊在 Y 軸方向進行放大，區塊內的文字也同樣受到放大的效果而變形。

CSS3 transform 屬性範例三、旋轉（rotate）的變形特效
<style type="text/css">
#test_rotate_0{
width:300px;
height:50px;
background-color:yellow;
}    
#test_rotate_1{
width:300px;
height:50px;
background-color:red;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
}    
#test_rotate_2{
width:300px;
height:50px;
background-color:blue;
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}    
</style>
<div id="test_rotate_0">預設不旋轉區塊</div>
<div id="test_rotate_1">第一個旋轉區塊</div>
<div id="test_rotate_2">第二個旋轉區塊</div>
範例效果
預設不旋轉區塊
第一個旋轉區塊
第二個旋轉區塊
範例三讓紅色與藍色的 DIV 區塊進行旋轉，不過兩個區塊的旋轉角度並不一樣，所以呈現出交錯的效果，而區塊內文字也跟著旋轉而變形，如果繼續調整角度，兩個區塊的旋轉效果會更加明顯。

CSS3 transform 屬性範例四、傾斜（skew）的變形特效
<style type="text/css">
#test_skew_0{
    width:300px;
    height:50px;
    background-color:yellow;
    margin-bottom:22px;
}    
#test_skew_1{
    width:300px;
    height:50px;
    background-color:red;
    -moz-transform:skew(5deg,5deg);
    -webkit-transform:skew(5deg,5deg);
    -o-transform:skew(5deg,5deg);
    -ms-transform:skew(5deg,5deg);
    transform:skew(5deg,5deg);
}  
#test_skew_2{
    width:300px;
    height:50px;
    background-color:blue;
    -moz-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
    -o-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
}
</style>
<div id="test_skew_0">原始不傾斜區塊</div>
<div id="test_skew_1">第一個傾斜區塊</div>
<div id="test_skew_2">第二個傾斜區塊</div>
範例效果
原始不傾斜區塊
第一個傾斜區塊
第二個傾斜區塊
範例四讓紅色的 DIV 區塊在 X 軸方向與 Y 軸方向各進行 5 度的傾斜效果，藍色的 DIV 區塊則在 X 方向進行 -20 度的傾斜效果，如果繼續調整傾斜角度，傾斜效果將會更加明顯，區塊內的文字也跟著傾斜效果而產生了變形的視覺效果。

➠如果你想要修改旋轉或傾斜的基準點也可以，與《CSS3 transform-origin 屬性》搭配是最完美的解決方案。

更多 CSS3 特效
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012