- 制作一个正方体首先需要建立正方体的6个面
- 因为正方体的6个面都是相同的 ，为了简写代码 ，减少写代码的时间消耗 ，所以我用x类来写它们的样式
- 因为正方体它是一个3D物体，所以需要用定位来制作它们
- 制作一个正方体，需要用css3中的旋转才能让人看得更立体 ，这里依次给大的div盒子里的子类 ，设置正方体需要的样式 ，为了让正方体的几个边连在一起，需要用translateZ来将它连在一起 ，并且设置正方体6个面的颜色，让正方体更有辨识度，通过旋转来讲正方体的几个面的位置调整
- 为了让正方体的效果更加的明显 ，还需要用到关键帧来运行
- 它的效果是下面这样的 ，因为有一个面的颜色是白色的 ，所以在浏览器上看的不是特明显 ，想看正方体全部效果可以把body的背景颜色设置成黑色 ，这样就可以看清楚正方体的全部效果
- 如果将x类里面的宽高设置为200px或者将所有的translateZ（）括号里的值设置为75px的话它就会将正方体的6个面全部合并起来 ，能让人看起来更像一个正方体
相关文章：