一.變形主要值得是利用transform功能來實現文字或的旋轉，縮放，傾斜，移動這四種處理。
1.旋轉-----transform:rotate(xxdeg);( ie9以上，safari 3.1以上,chrome 8以上、firefox 4以上、opera 10以上的瀏覽器都支援這些屬性)
先看例子：
這是乙個測試。transform:rotate(45deg);這句表示div元素順時針45度旋轉，deg是乙個角度單位。效果如下：#test3
2.縮放-----transform:scale(x)
這是乙個測試。也可以分別指定元素水平和垂直方向上的縮放。例如，元素在水平方向縮小50%，在垂直方向放大一倍：#test4
這是乙個測試。上面兩個縮放的效果如下：#test5
這是乙個測試。若只有乙個引數，預設只在水平方向上傾斜，不在垂直方向傾斜。#test6
4.移動：使用translate方法，兩個引數分別指定水平方向和垂直方向上的移動距離。若只有乙個引數，預設只在水平方向上移動，垂直方向上不移動。
這是乙個測試。這些變形也可以組合使用：#test7
這是乙個測試。將元素45度順時針旋轉，在縮小一半，然後在水平方向傾斜30度，在垂直方向傾斜45度，在分別在水平和垂直方向上移動150px,效果如下：#test8
可以指定變形的基點：在使用transform進行變形時，是以元素的中心為基準點進行的。使用transform-origin屬性可以改變基準點。
這是乙個測試。效果如下：（紅色是把基準點頂到左上點的，綠色是預設的）這是乙個測試。
#test9#test10
transform-origin屬性的取值，前乙個是「基準點在元素水平方向上的位置」，可以指定的值有：left,center,right;後乙個值是「基準點在元素垂直方向上的位置」，可以指定的值有：top,center,bottom.
css3中的變形（transform）
transform 字面上的意思就是 使改變外觀 改變形態 在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 scale 4.移動 translate 語法transform none transform rotate skew scale tra...
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動，並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform，我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...