2D轉換方法：在平面對元素進行旋轉，縮放，移動，拉伸。
㈠瀏覽器支持
⑴2D轉換效果有以下的瀏覽器支持：
⑵在編輯代碼的時候要注明用哪種瀏覽器打開，在前面加上前綴，下面是編輯器的簡寫形式，以及前綴名：
㈡ transform 屬性
⑴rotate() 進行旋轉的函數
⑵scale() 進行縮放的函數
㈢旋轉 transform：rotate（）
⑴rotate函數可以設置旋轉的角度，在括號里帶有的參數，就是它的角度，單位是deg（degree），設置角度的值，可以是正值，也可以是負值。如果是正值，那么就是順時針地旋轉，如果是負值，就是逆時針旋轉。
⑵例如：做兩個盒子，第一個盒子是正常顯示的，第二個盒子是旋轉一定角度的。第一個盒子用div標簽完成，第二個盒子是引用了一個ID類型的樣式，這個樣式的名字就是rotateDiv。看一下樣式的定義，兩個盒子共同的樣式：在div標簽作為樣式的名字，里面來定義它的高度，寬度，背景顏色和邊框。第一個盒子就按上面的樣式正常顯示出來，第二個盒子顯示的方式在rotateDiv里面，采用transform這個屬性設置為rotate函數，順時針旋轉30度。
⑶代碼及效果如下圖所示：
效果圖：
㈣縮放 transform：scale（）
⑴ transform：scale（x,y） 可以設置水平，垂直方向兩個值，具體如下圖所述：
⑵ 如果我們希望鼠標懸停在上面的時候，它有一個縮放的效果，可以加上以下的一條代碼：
.box:hover{
transform:scale(1.2);
}
㈤translate() 方法
⑴通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數：
⑵例如：值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素：
㈥skew() 方法
⑴通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
⑵例如：值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度：
㈦matrix() 方法
⑴matrix() 方法把所有 2D 轉換方法組合在一起。
⑵matrix() 方法需要六個參數，包含數學函數，允許：旋轉、縮放、移動以及傾斜元素。
⑶例如：如何使用 matrix 方法將 div 元素旋轉 30 度：
㈧利用CSS3 transform 屬性做示例
本例演示如何創建“寶麗來”圖片，並旋轉圖片，在谷歌瀏覽器中打開：
效果圖：
㈨總結2D transform 的方法
希望有所幫助。