今天与大家分享的是关于如何使用css3来制作立方体，这与前面分享的平面图形不同，重要的是如何产生立方体的效果以及如何操作，今天我们就来聊一聊这个课题。
首先，我们因该建立一个制作立方体的环境，换而言之也就是创建一个3D环境，只有这样我们才能有视觉上的立体感。
第一步，我们先在创建所需的环境，如下
我们要在body和box里面设置transform-style:preserve-3d；perspective:900px;创建3d环境来进行效果的展示。
第二步 我们把box作为一个背景面，运用定位，在box上面插入六个面，分别是box1-6，作为正方体的六个面并分别设置六个面为不同的颜色作为区别。为了效果更好，我们先将box绕Y轴旋转60°。如下
效果图如下：
第三步 开始设置正方体的每个面，假如先做右面，从初始位置看，应该将box1绕Y轴逆时针旋转90°即可(设置旋转基点为右边)。
第四步 制作前面。即将box2沿Z轴正向移动200px即可。
第五步 制作左面。即将box3绕左边顺时针旋转90°。这里为了效果更佳，故将box5的透明度调低。
第六步 制作底面。即将box4沿底边顺时针旋转90°。
第七步 制作上面。即将box5沿上边逆时针旋转90°。
第八步 将box面设置为透明，box6不需要移动，作为后面即可。切记：对于box，可以将其背景颜色设置为transparent，不可以设置透明度为0，否则就不会出现效果。
第九步 正方体就做好了，同理立方体做法与此基本一致。如果觉得不够完美的还可以将1-6六个数字设置一下字体大小和位置，在此就不操作了。另外立方体的制作还可以结合旋转和位移来操作，有兴趣的同学可以尝试一下哦