利用transform 可以實現旋轉、縮放、傾斜、移動
屬性有：translate、scale
移動：translatex(10px); //水平方向移動10px
translatey(50px); //垂直方向移動50px
translate(10px); //水平方向移動10px
translate(10px,50px); ///水平方向移動10px，垂直方向移動50px
縮放：scalex(2); //寬增大為原來的兩倍
scaley(2); //高增大為原來的兩倍
scale(2); //增大為原來的2倍
scale(1,2); //寬不變，高增大為原來的2倍
旋**rotate(30deg); //旋轉30度
傾斜：skewx(30deg); //沿著x軸傾斜30度
skewy(30deg); //沿著y軸傾斜30度
skew(10deg,20deg); //沿x軸傾斜10度，沿y軸傾斜20度
當然，要相容的話就要寫全字首了：如
transform:rotate(7deg);matrix：比較複雜，涉及到矩陣的運算，對應的矩陣是-ms-transform:rotate(7deg);
/*ie 9
*/-moz-transform:rotate(7deg);
/*firefox
*/-webkit-transform:rotate(7deg);
/*safari 和 chrome
*/-o-transform:rotate(7deg);
/*opera
*/
（省略1w+字..）
只需要給abcdef附上相應的值就可以了
translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)轉換而來
scale(sx,sy)可以由matrix(sx,0,0,sy,0,0) 轉換而來
rotate(θ)可以由matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 轉換而來
skew(θx，θy)可以由matrix(1,tan(θy),tan(θx),1,0,0) 轉換而來
更多看此文章：
演示：
CSS3 2D轉換模組
2d轉換模組 屬性 transform 方法 rotate 元素順時針旋轉給定的角度，負值時，元素將逆時針旋轉，單位deg。有rotatex rotatey rotatez，預設z translate 元素從其當前位置移動，根據給定的 left x 座標 和 top y 座標 位置引數。有trans...
CSS3 2D轉換用法
1，translate 方法 translate translate 方法，根據左 x軸 和頂部 y軸 位置給定的引數，從當前元素位置移動。例項div 2，rotate 方法 rotate rotate 方法，在乙個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。例項div 3,sca...
CSS3 2D轉換的旋轉和縮放
轉換 transform 是css3中具有顛覆性的特徵之一 可以實現元素的位移 旋轉 縮放 等效果 轉換 transform 可以簡單埋解為變形 移動 translate 旋 rotate 縮放 scale 2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。transform rotate ...