简单聊聊CSS中的3D技术之“立方体”

大家好，我是今天的男一号，我叫小博主。

今天来聊一下我在前端“逆战班”学习中遇到的颇为有趣的3D知识。前端学习3周，见识稀疏，在下面的分享中如有不对的地方请大家指教。

那下面我们直接来干货！

第一步、构建基础结构。

我们用div和ul-li列表来完成结构。如下图：

第二步、去除基础样式、设置大小和位置

这里比较重要的是给li设置相对定位来实现位置重叠，必须要先给ul设置绝对定位。

positione: relative（绝对定位）、positione: absolute（相对定位）如下图：

第三步、给容器添加景深、观察视角、3D格式。

（1）我们要给box容器添加景深效果，perspective：600px（这里我的景深值为600px）景深效果相当于是3d眼镜，让我们处于3d环境中，

（2）同时还可以设置观察视角，相当于是想让我们的眼镜从哪个方向来看这个效果，也就是perspective-origin：top right（这里我用的视角就是右上角）。

（3）给ul添加3d格式，使我们ul结构拥有3d的结构，相当于处在3d的舞台上transform-style：preserve-3d（这个是3d模型必须要用到的，不添加就无法形成3D结构）。

（4）给ul添加tranform-origin 基点位置，主要是针对旋转和缩放，默认都是中心点为基点。（这个是等下添加hover时用到的，我提前添加了。）如下图：

第四步、给li设置颜色，进行平面图定位。

这里第1个li不需要调整位置，我们给一个颜色就行了。

第二到第五个需要分别设置位置，形成立方体前的平面图。

尤其注意第六个li，这里我们直接位移Z轴距离，-200px意识是让它后走200像素，因为添加景深的效果，我们可以看到一个角。如果没有景深效果，第一个和第六个是上下位置，距离200px。

第五步、分别对几个面进行位移上的旋转。

因为在上面第三步我们已经加过3D效果，因此我们可以实现3D旋转的效果。

利用transfrom:rotate（角度值）分别设置旋转，这里一定要注意旋转需要设置的基点位置，基点位置tranform-origin：（值）。如下图：

第六步、利用hover查看效果。

利用hover，给ul设置transition：4s 旋转过渡时间，更好的观察移动过程。

transform：rotateY（360deg）这是让立方体沿Y轴进行360°旋转，基点我们在第三步已经设置过了。运行如下图：

这里我们就基本完成3D立方体的任务，下面我再附上完整的CSS代码和HTML代码。