在做練習的時候學到css的翻轉導航菜單，原代碼有點讓人頭疼，通過對其css的參數一點點研究了其實現過程。
這里推薦大家研究這個3D翻轉動畫的代碼。
一
首先要知道坐標系的設定如下：
其次翻轉關鍵的參數有：
perspective: 200px;
transform-style: preserve-3d;
transform: rotateX(90deg);
transform: translateZ(30px);
transition: all 1s linear;
1.設置透視屬性，觀察者位置在視圖前200px；
2.設置是3D空間的變換效果，子元素合在一起變換；
3.設置旋轉，沿X軸旋轉90度，平面旋轉后看到的是線；
4.設置位移，沿Z軸位移30px。
5.設置變換函數。
二
為了先初步了解，我先做一個導航圖正面的翻轉效果。
效果同立方體的翻轉，正面翻轉到頂面。立方體只旋轉不位移，但是立方體的正面是發生位移的。
正面的變換原點在中心點，相對變換前的位置，變換后的位置向上位移50% 向后位移50%。
但是！css動畫結束參數是根據這個面結束時的坐標的，這時候坐標系跟着變了，最后的結果是Z軸+50% Y軸-50%。
初始參數參考坐標如圖一，不是根據變換后坐標寫。
下圖是三個參數的效果。
父元素設置 ：
perspective: [para]px;
變換子元素設置：
transform: rotateX(90deg) translateZ(50px) translateY(-50px);
transition: all 1s linear;
三
通過上面的例子，我就明白了啥是3D變換了。但是這個例子是單個面，而設置一個3D立體的變換怎么設呢？當然不能對每個面進行定位，太麻煩，要整體變換。
1.設置多個面的原始旋轉和位移，組成一個立方體。
2.立方體盒子元素設置：transform-style: preserve-3d;
3.立方體父元素設置景深：perspective: [para]px;
4.立方體盒子元素設置變換原點：transform-origin: 50% 50% -50px;
如果不設置變換原點，修正變換后位移也行。
5.對立方體盒子元素進行整體旋轉。方體盒子元素沿X軸旋轉90度即可。
效果如下，第二個圖是設置了 opacity: 0.5;
另外下面做個錯誤的稀飯
在立方體元素上設置transform-style: preserve-3d; perspective:200px;
立方體上設置景深 perspective，立方體的圖形就被固定了，或者說觀察位置隨立方體改變。需要從上一級元素觀察才行。
↓ 在立方體元素上同時設置transform-style: preserve-3d; perspective
↓ 沒有設置perspective；
↓ 沒有設置transform-style: preserve-3d
over