CSS 3D轉換在CSS 中，除了可以對頁面中的元素進行2D 轉換外，您還可以物件元素進行3D轉換（將頁面視為一個三維空間來對頁面中的元素進行移動、旋轉、縮放和傾斜等操作）。與2D 轉換相同，3D 轉換同樣不會影響周圍的元素，而且可以與其它元素重疊。但是，變換後的元素任然會佔用其預設位置（未變換前）的空間。
三維座標系
我們先來了解下三維座標系，所謂三維座標系，就是在原有的二維座標系上加上了一個z軸，這樣就形成了一個立體空間，如下圖所示：
①x軸：水平向右注意：x 右邊是正值，左邊是負值
②y軸：垂直向下注意：y 下面是正值，上面是負值
③z軸：垂直螢幕注意：往外面是正值，往裡面是負值
轉換屬性
3D Transform方法
1.translate3d()
translate3d() 函數用於移動元素在3D 空間中的位置，這種變換的特徵是透過三維向量座標來定義元素在每個方向上（X軸、Y軸、Z軸）的偏移量。函數的語法格式如下：
translate3d(tx,ty,tz)
參數說明如下：
（1）tx：表示元素在水平方向（X 軸）移動的距離；
（2）ty：表示元素的垂直方向（Z 軸）移動的距離；
（3）tz：表示元素在Z 軸移動的距離，此參數不能使用百分比值。
2. translateZ()
函數translateZ() 用來沿著三維座標系的Z 軸來移動元素，函數的語法格式如下：
translateZ(tz);
其中參數tz 用來設定元素在Z軸上移動的距離。
提示：translateZ(tz); 相當於translate3d(0, 0, tz); 的簡寫形式。
3.rotate3d()
rotate3d() 函數用來設定元素沿著X軸、Y軸或Z軸方向旋轉的角度，該函數只會使元素按照固定的軸旋轉，不會使元素變形。 rotate3d() 函數的語法格式如下：
rotate3d(x,y,z,a)
參數說明如下：
x：設定旋轉軸的X軸座標；
y：設定旋轉軸的Y軸座標；
z：設定旋轉軸的Z軸座標；
a：設定元素旋轉的角度，正角度表示順時針旋轉，負角度表示逆時針旋轉。
4. scale3d()
scale3d() 函數可以改變元素的大小（縮放），函數的語法格式如下：
scale3d(sx,sy,sz)
參數說明如下：
sx：表示元素在X 軸方向的縮放比例；
sy：表示元素在Y 軸方向的縮放比例；
sz：表示元素在Z 軸方向的縮放比例。
5. matrix3d()
matrix3d() 函數與前面我們學習的matrix() 函數非常相似，不過matrix3d() 函數可以使用一個4 × 4 的矩陣來描述一個三維（3D）轉換。透過matrix3d() 函數可以一次執行所有的3D轉換操作，函數的語法格式如下：
matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
參數說明如下：
a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4：用來描述各種3D 轉換；
a4、b4、c4：表示元素變換的量。
舉例說明：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*讓子盒子保持3d立體空間環境*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100%; background-color:pink;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div></ div><div></div></div></div></body></html>運行結果：
