總結CSS3新特性(Transform篇)

概述:

CSS3新添加的Transform可以改變元素在可視化區域的坐标(這種改變不會引起文檔的重排,隻有重排),以及形狀,還有些3D形變.結合 Animation(這裡以後會有個連結的) 能實作酷炫的動畫;

旋轉(rotate):

rotate支援一個參數,一個角度值 0-360deg

#demo {
   transform:rotate(180deg)  ;/*實作旋轉,左上角的東西會在右下角顯示*/
}      

縮放(scale):

scale支援兩個參數(x,y),如果沒有填y的話,則取x的值;1為正常,<1為縮放,>1為放大;

#demo {
  transform:scale(1.2);/*放大1.2倍*/
  transform:scale(.8);/*縮小為正常的0.8倍*/
}      

scale提供兩個子方法,scaleX,scaleY,用來分别設定x或y的縮放;

傾斜(skew):

skew支援兩個參數(x,y),參數類型為角度(deg),如果不填y的話,則預設為0(與縮放不同);

#demo {
  transform:skew(45deg);/*文本沿x軸向左傾斜45°*/
  transform:skew(0,45deg);/*文本沿y軸向下傾斜45°*/
}      

如果僅設x或y,可直接使用兩個子方法,skewX與skewY;

平移(translate):

translate接收兩個參數(x,y)為平移的距離,如不填y值,則預設為0,支援所有CSS内有效的長度機關(使用translate用來移動元素不會觸發重排,隻有重繪);

#demo {
  transform:translate(20px,5vh);/*向左移動二十像素,向下移動百分之五的視窗高度*/
}      

同樣有兩個子方法,translateX,translateY;

 做了一個簡單的小例子,用了rotate;

總結:

用Transform可以做出很多酷炫的事情,(跳過了matrix,matrix3d沒有說...)當然了,不要像我這樣作死

相關參考文檔:

MDN的Transform

w3school的Transform

W3的文檔