CSS3 變換也叫 2D/3D轉換，主要包括以下幾種： 旋轉 ( rotate ) 、 扭曲 ( skew ) 、 縮放 ( scale ) 和 移動 ( translate ) 以及 矩陣變形 ( matrix ) 。
3D變換涉及到的四個屬性:
perspective 設置舞臺元素（變換元素的父元素），理解為人到舞臺的距離。
transform-style (設置在父元素)控制子元素是在二維平面還是三維空間。
transform-origin 作用在變換元素上，控制變換的基點（坐標原點）。
backface-visibility 作用在變換元素上，指示變換元素旋轉180度背面是否可見。

透視perspective: number|none;
perspective 屬性是3D變換最重要的屬性，定義 3D 元素距視圖的距離，即設置查看者的位置，可理解為物體距你的距離，以像素計。該屬性的存在與否決定了你看到的是2D還是3D，沒有透視，為2D。
perspective取值為none或不設置，就沒有真3D空間。
perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
perspective的值無窮大，或值為0時與取值為none效果一樣。
perspective是針對父元素的，設置人眼與父元素間距離。

透視基點 perspective-origin: x-axis y-axis;
主要用來決定perspective屬性的源點角度。它實際上設置了X軸和Y軸位置，在該位置觀看者好像在觀看該元素的子元素。

x-axis：定義該視圖在 x 軸上的位置。默認值：50%。
可能的值：left、center、right、length、%
y-axis：定義該視圖在 y 軸上的位置。默認值：50%。
可能的值：top、center、bottom、length、%

**呈現樣式transform-style: flat | preserve-3d; **
其中 flat 值為默認值，表示所有子元素在2D平面呈現。 preserve-3d 表示所有子元素在3D空間中呈現。
preserve-3d ，它表示不執行平展操作，他的所有子元素位于3D空間中。
transform-style 屬性需要設置在父元素中。

transform-origin：x，y;
用來設置變換基點的屬性
transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。默認值為50%,50%,0。

backface-visibility：hidden|visible;
hidden:背面不可見，元素在3D環境下渲染上下文，將根據3D變形矩陣來計算;
visible:背面可見，元素不在3D環境下渲染上下文，將根據2D變形矩陣來計算。