在css3中可以利用transform功能來實現文字影象的旋轉、縮放、傾斜、移動這四種型別的變形處理
相容性：
瀏覽器safari
chrome 8+
firefox 4+
opera 10+
各個瀏覽器寫法
示例文字div>css：
div
rotate(45deg)含義：rotate是旋轉，45deg是旋轉角度；旋轉方向為順時針；
使用scale方法來實現文字或影象的縮放處理，在引數中指定縮放倍率，例如：scale(0.5)表示縮小50%；
html：
示例文字div>css：
div
圖一是原圖，沒有任何縮放；
圖二是縮小50%；
圖三是x軸縮小50%，y軸放大2倍；即：-webkit-transform: scale(0.5,2);
使用skew方法來實現文字或影象的傾斜處理，在引數中分別指定水平方向傾斜角度、垂直方向傾斜角度，例如：skew(30deg,40deg)表示水平方向傾斜30度，垂直方向傾斜40度；
示例文字div>css：
div
使用translate方法來實現文字或影象的移動處理，在引數中分別指定水平方向移動距離、垂直方向移動距離，例如：translate(50px,50px)表示水平方向移動50px，垂直方向移動50px；
css：
div
transform-origin屬性，可以改變變形的基準點。
第一張圖不修改基準點的css：
div
div.a
div.b
div
div.a
div.b
transform-origin引數分別是：基準點在水平方向上的位置(left、center、right)、基準點在垂直方向上的位置(top、center、bottom)；
其中 水平方向上的位置中可取值為：left、center、right;
垂直方向上的位置中可取值為：top、center、bottom;
CSS3變形效果
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動，並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform，我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...
CSS3中的變形處理 transform 屬性
在css3中，可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理，下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...