CSS 利用3D写一个魔方模型
css可以模拟3d效果，需要配合透视使用，利用一些平面通过平移和旋转可以得到我们想要的3d效果。不过在平面的基础上需要添加立体呈现。
推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。
1. 构建html骨架
- 魔方一共有6个面
- 魔方6个面需要大盒子包裹，方便立体呈现和透视
2. 给大盒子和6个面添加背景颜色、大小等样式
- 代码将之后需要的动画等效果都写上了
- 有些代码是调试用的
3. 给6个面分别给三阶魔方的格子并配上颜色
- 代码与上面的会有一些层叠
html：
css:
4. 利用偏移和旋转对6个面进行位置调整
- 调整之前开启“上帝视角”，方便观察
transform: rotateY(60deg) rotateZ(30deg) - 6个面的父元素也就是box开启立体呈现，不然没有效果
transform-style: preserve-3d; - 为了更加真实，需要在box的父元素上添加透视
- 偏移的时候要理性分析，调整方案不限
5. 添加动画效果
- 定义动画
- 使用动画
最后效果
