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
PHP Smarty MySQL JQuery Apache W3C