之所以写这篇文章是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(Mobile端页面，用模拟器看）用CSS3完成的3D透视，虽然3D有点晕，但是让人置身其中的交互体验感觉非常好，在移动端做一些H5页面还是很养眼的.而且掌握了原理之后，做出来也不费力气。好好学习之后，我将一些学习过程分享给大家。在下方输入文字：（部分Gif图片较大，需要稍等）3D效果说明看的比看的好。.io/Chokcoco/pen/mAyRGv)，这里我以一个带背景色的div为例，我们的视角是在一个立方体中，立方体的旋转动画给我们一种3D的感觉。那么原图是什么样子的呢？我们把距离拉远看看：http://codepen.io/Chokcoco/pen/KgwqRd看起来是这样的：与第一个效果相比，实际上做了什么它只是把我们的视角推入了立方体，给我们一种感觉在那里。而合理利用CSS3提供的一些3D属性，可以轻松实现上述效果。制作这样的3D图形，我在之前的文章中已经详细描述了过程。有兴趣的可以戳进去看看：【CSS3进阶】超酷的3D旋转透视transform-styleandperspective。它使用了两个CSS属性：transform-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效果的显示。下面是我认为比较好的方法：
