轉換是使元素改變形狀、尺寸和位置的一種效果。能夠對元素進行移動、縮放、轉動、拉長或拉伸。
2d轉換
瀏覽器相容：
1）internet explorer 10、firefox 以及 opera 支援 transform 屬性。
2）chrome 和 safari 需要字首 -webkit-。
3）internet explorer 9 需要字首 -ms-
轉換屬性：
transform:向元素應用2d或3d轉換
transform-origin:改變被轉換元素的中心點（2d 轉換元素能夠改變元素 x 和 y 軸。3d 轉換元素還能改變其 z 軸。）
x,y,z軸分別對應的取值：
x:left(0%) center(50%) right(100%) length(px)
x:top(100%) center(50%) bottom(0%) length(px)
z:length(px)
2d轉換的方法：
3d轉換
瀏覽器相容：
1)internet explorer 10 和 firefox 支援 3d 轉換。
2)chrome 和 safari 需要字首 -webkit-。
3)opera 仍然不支援 3d 轉換（它只支援 2d轉換）。
3d座標系：
x軸在螢幕上為水平方向；y軸為垂直方向；z軸為垂直於螢幕的方向，也就是眼睛直視螢幕的這個距離。
轉換屬性：
transform-style:規定如何在 3d 空間中呈現被巢狀的元素,一般該宣告應用在3d變換的兄弟元素們的父元素上，也就是舞台元素。transform-style:preserve-3d實現3d效果不能少。
firefox 支援 transform-style 屬性。
chrome、safari 和 opera 支援替代的 -webkit-transform-style 屬性。
backface-visibility:定義元素在不面對螢幕時是否可見。為了切合實際，我們常常會這樣設定，使後面元素不可見：backface-visibility:hidden
perspective:設定了觀察者與螢幕的距離，使具有三維位置變換的元素產生透視效果。
perspective-origin:規定了鏡頭在平面的位置，預設是放在元素的中心
3d轉換方法：
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...
2D縮放和3D位移
2d 平面空間的元素變形。變形屬性 transform transform的屬性值為功能函式。2d功能函式 2d的位移 2d的旋 2d的縮放 2d的傾斜 transform translate x,y 位移 transform translatex x軸移動的距離 transform transla...
2D轉換及動畫
可以實現移動 旋轉 放縮效果的特徵 移動類似於定位，可以改變元素在頁面中的位置。語法 transform translate x,y 也可分開寫 transform translatex n transform translatey n 特點 旋轉是指讓元素在二維平面上順時針或逆時針旋轉 語法 tr...