總結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的文檔