1. 三維坐標系（里面的值不能省略，沒有就寫 0 ）
x 軸：水平向右 注意：x 右邊是正值，左邊是負值
y軸： 垂直向下 注意：y 下面是正值，上面是負值
z軸：垂直屏幕 注意： 往外面是正值，往里面是負值
主要知識點：
3D位移：translate3d（x,y,z）
3D旋轉：rotate3d（x,y,z）
透視：perspective
3D呈現 transfrom-style
2. 透視（perspective：寫在被觀察元素的父盒子上）
在 2D 平面產生近大遠小視覺立體，但是只是效果二維的，如果想要 3D效果必須 設置透視
1. 如果想要在網頁產生 3D 效果 需要透視（理解成 3D 物體投影在 2D 平面內）
2. 模擬人類的視覺位置，可認為安排一只眼睛去看
3. 透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
4. 距離視覺點越近的在電腦平面成像越大，越遠成像越小
5. 透視的單位是像素
注意：
透視寫在被觀察元素的父盒子上面
z 軸值越大，我們看到的物體就越大
3. 3D旋轉（rotate3d）
語法：
transform:rotateX(45deg); // 沿着 x 軸 正方向旋轉 45deg
transform:rotateY(45deg); // 沿着 y 軸正方向旋轉 45 deg
transform:rotateZ(45deg); // 沿着 z 軸正方向旋轉 45 deg
transform:rotate3d(x,y,z,deg); // 沿着自定義軸旋轉 deg 為角度（了解即可）
左手准則(X 軸)：左手的大拇指指向（比贊的手勢，大拇指指向右） x 軸的正方向，其余手指的彎曲方向就是該元素沿着 x 軸旋轉的方向
左手准則(Y 軸)：左手的大拇指指向（比贊的手勢，大拇指指向下） y 軸的正方向，其余手指的彎曲方向就是該元素沿着 y 軸旋轉的方向
3D旋轉 rotate3d
transform：rotate3d(x,y,z,deg)：沿着自定義軸旋轉 deg 為角度，x y z 表示旋轉軸的矢量，是標識是否沿該軸旋轉，最后一個標示旋轉的角度
transform：rotate3d(1,0,0,45deg); // 就是沿着 x 軸旋轉45deg
transform：rotate3d(1,1,0,45deg); // 就是沿着對角線旋轉45deg
4. 3D 呈現 transfrom-style
控制子元素是否開啟三維立體環境
transform-style：flat子元素不開啟3d立體空間 （默認）
transform-style：preserve-3d；子元素開啟立體空間
代碼寫給父級，但是影響的是子盒子