CSS3 Transform

以下列舉四種建立 CSS Transform 效果需要的設定語法,滑鼠移至圖片檢視動態效果,使用的時候根據自己需求,調整其中的數字即可。

Rotate



在網頁上配置數張圖片,再針對各張圖片設定 transform:rotate(d)樣式即可,參數 d 為所要轉動的角度,例如傳入 60deg 表示要轉動 60 度,考慮瀏覽器的相容性問題,完整指定如下:

-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-ms-transform:rotate(60deg);
transform:rotate(60deg);

其它角度請依序定即可,其中從左到右角度:0deg、30deg、60deg、90deg、120deg、180deg。


Scale



在網頁上配置數張圖片,再針對各張圖片設定 transform:scale(s) 樣式即可,參數 s 為所要縮放的倍數,例如傳入 0.5 表示要縮小一倍,考慮瀏覽器的相容性問題,完整指定如下:

-webkit-transform:scale(0.5) ;
-moz-transform:scale(0.5) ;
-ms-transform:scale(0.5) ;
transform:scale(0.5) ;

其它倍數其自行嘗試。


Translate




在網頁上配置數張圖片,再針對各張圖片設定 transform:translate(x,y) 樣式即可,參數 x 為移動的 x 座標值,y 則是 y 座標值,例如傳入 (0px,160px) 表示向下移動 160px ,考慮瀏覽器的相容性問題,完整指定如下:

transform:translate(0px,160px) ;
-ms-transform:translate(0px,160px) ;
-moz-transform:translate(0px,160px) ;
-webkit-transform:translate(0px,160px) ;

只要設定 x,y 座標,即可將物件移動至任何指定的座標位置,請自行嘗試。


Skew



針對網頁上配置的圖片,設定 transform:translate(x,y) 樣式即可,參數 x 為偏移的 x 座標距離值,參數 y 則是 y 座標距離值,例如傳入 (180px,60px) 表示水平偏移 180 px,垂直偏移 60px,考慮瀏覽器的相容性問題,完整指定如下:

transform:skew(6deg,6deg) ;
-webkit-transform:skew(6deg,6deg) ;
-moz-transform:skew(6deg,6deg) ;
-ms-transform:skew(6deg,6deg) ;


沒有留言: