之所以写这篇文章是因为看到了这个页面：糯米-未来大学3D视图页面[1]使用CSS3完成的3D透视，虽然3D有些晕，但是让人身临其境的交互体验感觉很棒，在移动端做一些H5页面非常吸睛。而且掌握了原理之后，做出来也不费力气。好好学习之后，我将一些学习过程分享给大家。在下方输入文字。3D效果示意图首先，先直观感受一下我上面提到的效果的简化版：CodePenDemo--3DView[2]这里我以一个带背景色的Div为例。我们的视角是在一个立方体中，立方体的旋转动画让我们有一种3D的感觉。那么原图是什么样子的呢？我们缩小看看：CodePenDemo--3DView2[3]静态图如下，是这样的：和第一个效果相比，它所做的其实是将我们的视角推入立方体，我们有一个身临其境的感觉。而合理利用CSS3提供的一些3D属性，可以轻松实现上述效果。要制作这样的3D图形，我在之前的文章中已经详细描述了过程。有兴趣的可以戳进去看看：【CSS3进阶】炫酷3D旋转透视【4】变换样式和透视再简单复述一下，主要用到两个CSS属性：变换样式perspectivetransform-style使用CSS3实现3D效果，最重要的就是使用transform-style属性。transform-style只有两个值：//语法：transform-style:flat|preserve-3d;transform-style:flat;//默认情况下，子元素不会保留其3D位置transform-style：保留3d；//子元素将保留其3D位置。当父元素设置transform-style:preserve-3d时，可以对子元素进行3D变形操作。3D变形与2D变形相同。可以使用transform属性来设置，也可以使用指定的函数或三维矩阵。元素的变形：当我们指定一个容器的transform-style属性值为preserve-3d时，该容器的后代元素将具有3D效果。这个有点抽象，就是当前父容器设置了preserve-3d值后，它的子元素就可以相对于父元素所在的平面进行3D变形操作。使用translateX(length)、translateY(length)、translateZ(length)执行3D位移操作。和2D操作一样，元素位移操作也可以组合成translate3d(x,y,z)；使用scaleX()、scaleY()、scaleY()进行3D缩放操作，也可以组合成scale3d(number,number,number)；使用rotateX(angle)、rotateY(angle)、rotateZ(angle)进行3D旋转操作，也可以组合成rotate3d(Xangle,Yangle,Zangle)的格式。perspective透视语法如下：{perspective:number|none;}简单来说，当元素没有设置perspective时，即当perspective:none/0时，所有后代元素都被压缩在同一个二维平面上，并且没有景深效果。perspective设置元素的三维透视距离，只作用于元素的后代，不作用于元素本身。如果你设置透视，你会看到三维效果。我们之所以能在立方体之外看到立方体，深入到立方体内部，就是因为透视属性。它让我们可以选择将视角推入或远离它，因此它具有3D的感觉。3D视图页面的布局结构为了达到这样的效果，需要灵活的布局来控制整个3D效果的显示。下面是我认为比较好的方法：
