一、perspective属性和transform:perspective
父元素如果不设置perspective属性，那么子元素进行3d变换的效果只是它在2D平面的投影。
(1)子元素没有任何3D变换的情况如下图：
(2)子元素沿Y轴旋转30度的情况如下图：
可以看出图片宽度小了点。
(3)子元素沿Y轴旋转80度的情况如下图：
80度旋转后，子元素的宽度更小了。相当于有一束平行光照射到屏幕上，将旋转后的子元素投影到屏幕上，而我们所看到的屏幕上的子元素正是投影后的效果。
(4)接下来看下，父元素设置了perspective:400px后的效果：
网上其他教程上对Perpective属性的解释是：视距，代表着视点到3D对象的距离。3D对象我们都知道，图中红色的被旋转过的子元素就相当于3D对象。这里我解释下视点的含义，沿着垂直于平面的Z轴正方向找到一个点作为视点。而perspective-origin就代表着视点的位置。
(5)那么perspective属性和transform:perspective有啥区别嘛？在使用方法上，Perpspective是对父元素设置的，而transform:perspective属性是对子元素设置的；效果上有啥区别嘛？如果只有一个子元素那么效果上区别不大的，如果有多个子元素就可以看出区别啦!
下面是只有一个子元素的情况：
(5.1)父元素设置Perspective:400px,子元素沿Y轴旋转80度
(5.2)子元素设置transform:perspective(400px)并旋转80度
可以看出只是在角度上有点不同。到这里可以推断出，是视点位置不同导致了这两中情况下的差异。
下面再来看下有多个子元素的情况。
(5.3)父元素设置perspective:400px ，子元素都沿Y轴旋转80度
(5.4)子元素都设置transform:perspective(400px)并旋转80度
到这里我们得出结论：父元素设置perspective和子元素设置transform:pespective都是为了设置视距，但是差别是视点不一样。：父元素设置perspective只有一个视点，而子元素设置transform:pespective则是在相对子元素的z轴方向分别有一个视点，也就是说每个子元素都有它对应的视点。
二、transform:preserve-3d | flat
对于这个属性，网上其他教程是这么解释的：transform-style属性指定嵌套元素是怎样在三维空间中呈现。值为flat表示所有子元素在2D平面呈现；值为preserve-3d表示所有子元素在3D空间中呈现。
这里我解释下：正常情况下或者父元素设置了transform：flat，那么如果父元素进行旋转变换，那么子元素依然附着在父元素中，也就是说子元素会跟着父元素旋转，如下图所示，父元素和子元素都旋转80度。
再来看看父元素设置了transform：preserve-3d后的效果：
