在做练习的时候学到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.父元素设置perspective: [para]px; transform-style: preserve-3d;
transform-style: preserve-3d; 这个我没有设置过，据说不设置会塌方~~~
3.对父元素整体进行位移和旋转。
如果是翻转导航栏的话设置正面和底面，父元素沿X轴旋转90度即可。
over