transform 字面上的意思就是 使改變外觀、改變形態
在css3中transform主要包括以下幾種:
1.旋轉 rotate
2.傾斜 skew
3.縮放 scale
4.移動 translate
語法transform：none
transform：rotate | skew | scale | translate
none：表示不進行變換
表示乙個或多個變換函式，空格分開，意思就是我們同時對乙個元素進行transform的多種屬性操作，使用多個屬性時需要有空格隔開
一、旋轉rotate
transform:rotate()；
旋轉；其中「deg」是「度」的意思，如「10deg」表示「10度」
rotate()方法，
通過指定的角度引數對元素指定乙個2d rotation(2d旋轉)
在乙個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
二、傾斜 skew
傾斜具有三種情況
skew(x,y)使元素在水平和垂直方向同時傾斜（x軸和y軸同時按一定的角度值進行傾斜變形）；
skewx(x)僅使元素在水平方向傾斜變形（x軸傾斜變形）；
skewy(y)僅使元素在垂直方向傾斜變形（y軸傾斜變形）;
三、縮放 scale
縮放scale和傾斜skew是極其相似，也具有三種情況
scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）;
scalex(x)元素僅水平方向縮放（x軸縮放）；
scaley(y)元素僅垂直方向縮放（y軸縮放）;
四、移動translate
移動translate和skew、scale一樣同樣具有三種情況
translate(x,y)水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）；
translatex(x)僅水平方向移動（x軸移動）；
translatey(y)僅垂直方向移動（y軸移動）;
簡單粗暴的解釋css3中的transform屬性
事先說明，本文範疇尚限制在2d的transform中。對於css3的transform屬性，真是愛不釋手，有了這個特性，各種特效輕鬆搞定。引用一句歌詞 旋轉，跳躍，我不停歇 transform就是這麼時尚，就是這麼任性。當然他任性的地方不只是在功能方面，還有在使用方面。我們看一下w3c官網中關於tr...
CSS3中的變形功能
一.變形主要值得是利用transform功能來實現文字或的旋轉，縮放，傾斜，移動這四種處理。1.旋轉 transform rotate xxdeg ie9以上，safari 3.1以上,chrome 8以上 firefox 4以上 opera 10以上的瀏覽器都支援這些屬性 先看例子 這是乙個測試。...
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...