六个面组成的 3D 立方体 | 星雨笔录

核心： 六个面分别通过 rotateX/rotateY 和 translateZ 放到立方体不同方向。

最小示例：

.cube { transform-style: preserve-3d; }
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }

学完能做： 通过六个面和三维变换组成立方体。