一、基本操作
1.旋**
transform：rotate（順時針旋轉的度數）；
2.縮放
transform：scale（水平方向縮放的比例，垂直方向縮放的比例）；
3.傾斜
transform：skew（水平方向上傾斜的角度，垂直方向上傾斜的角度）；
4.移動
transform:translate(水平方向上偏移的距離，垂直方向上偏移的距離);
5.matrxi方法把以上的方法合而為一，具體的方法如下所示：
transform:matrxi(順時針旋轉的度數，水平縮放的比例，垂直縮放的比例，水平方向順時針傾斜的角度，水平方向便宜的角度，垂直方向偏移的角度);
例子：div {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* ie 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* safari and chrome */
值得注意的是，目前各大主流的瀏覽器還對css3的主流動畫效果還沒有達成一致的開發標準，所以需要處理他的相容性問題。
比如處理移動：
.div{
各種屬性
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* ie 9 */
-webkit-transform:rotate(30deg); /* safari and chrome */
其他類似都要加上字首。
二、多種變形操作
CSS3過渡和2D屬性
一 過渡屬性 1.transition property 檢索或設定物件中的參與過渡的屬性說明 屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height 還可以設定為all 預設值 代表所有屬性 2.transition duration 檢索或設定物件過渡的持續時間說明 單位 s,...
CSS3中的2D轉換
通過 css3 轉換，我們能夠對元素進行移動 縮放 轉動 拉長或拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果。注 internet explorer 10 firefox 以及 opera 支援 transform 屬性。chrome 和 safari 需要字首 webkit 屬性transfo...
CSS3新增2D和3D屬性
3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...