總結CSS3新特性 Transform篇

css3新新增的transform可以改變元素在視覺化區域的座標(這種改變不會引起文件的重排,只有重排),以及形狀,還有些3d形變.結合 animation(這裡以後會有個鏈結的) 能實現酷炫的動畫;

rotate支援乙個引數,乙個角度值 0-360deg

#demo

scale提供兩個子方法,scalex,scaley,用來分別設定x或y的縮放;

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

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

translate接收兩個引數(x,y)為平移的距離,如不填y值,則預設為0,支援所有css內有效的長度單位(使用translate用來移動元素不會觸發重排,只有重繪);

#demo

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

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

相關參考文件:

mdn的transform

w3school的transform

w3的文件

CSS3新特性總結

1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...