【学习文章指路】：https://www.w3cplus.com/css3/front-end-challenge-accepted-css-3d-cube.html
说起3D 必有景深。用一句简单的话来说景深，恐怕就只有这句“近大远小”了。
如果你之前或多或少的了解过 css 3D 相关的内容。
那你一定知道perspective属性

perspective: 800

perspective 的值到底给多少合适呢？反正我通常都是凭感觉瞎写的-_-！
perspective 的值通常由观察点决定。

4倍景深比较合适

老司机说

对于`x`轴，高度值乘以`4`应该合适。对于`y`轴，应该是宽度值乘以`4`

我们现在尝试着造一个正方体。

先确定景深，再建模

假设我们现在期望的景深是800px。
那么正方体宽高为200px。
然后我们将正方体的6个面像六张扑克牌一样叠在一起。要想实现这一步，需要用到position 定位。

现在我们要做的是以(0,0,0)点为中心（注意不是以（0，0，0）为原点）建一个正方体。
所以正方体的前后两个面，就要分别向前或向后移动100px。
即进行translateZ变换

前后两个面的定位.png

同理使用 translateX 进行左右两个面的定位，使用 translateY 进行上下两个面的定位。我们会得到如下的结果。

translate干的好事.png

这个时候我们肯定会怀疑，这个事儿是不是让 translate 搞砸了？
事实上没有。我们所有的面都还需要一个旋转的操作，即 rotate。
当我们执行完以后，会得到如下的结果。

image.png

这个时候确实是像个立方体了，但是我们看到的面却少的可怜，只有两个。这个时候我们尝试给每个面一个透明度。会得到如下效果。

opacity.png

其实效果还不错，但是视角有点不太好。如果要想改变视角的的话，只有两种选择，要么我们动，要么正方体动。我们面对屏幕，这个正方体不是真实的，我们再怎么动都不会改变视角。所以只能让正方体动。

我们只需要对这个盒子进行改动就好了。比如说我们将这个正方体整体下移到某个高度,我们就有可能看到顶面。要注意我们之前进行的一系列操作都是一个面一个面单独操作的。

正方体整体下移300px.png

单方向旋转

现在我们希望这个正方体可以自己沿着X 轴或是Y 轴360°旋转起来。
我们可以简单的加个动画实现正方体自己滚动，但是在现在这种状态下，你会发现，它动起来有些奇怪。

我们需要先把正方体摆正。即我们只想看到正面。把perspective属性注释掉就好了。当我们实现正方体后会发现有的文字还是反的，我们需要调整下文字。

旋转实现后文字还是反的.gif

对于我的正方体而言，back 和 bottom 两个面可能需要做些旋转调整。

调整后如下.gif

当然这个效果也可以通过transform-origin属性实现。如果你有兴趣，推荐你自己试试。

【其他知识点】
线虚，对正方体进行 translateZ移动
IE 不支持transform-style: preserve-3d;可以使用flat替换