3D Spinning Cube 3D 旋转立方体
Six divs, one shared keyframe, zero JavaScript — a rotating cube built entirely from transforms. 六个 div、一个共享关键帧、零 JavaScript——纯 transform 拼出来的旋转立方体。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The parent has transform-style: preserve-3d so its children keep their own 3D space. Each face is a square pushed out by translateZ(50px) after being rotated into position: rotateY(90deg) for the sides, rotateX(90deg) for top and bottom. The animation rotates X and Y by 360 degrees together, which is why the spin looks tumbling rather than axial. 父级设 transform-style: preserve-3d，子元素才会保留各自的 3D 空间。每个面先转到朝向后用 translateZ(50px) 推出去：侧面是 rotateY(90deg)，上下是 rotateX(90deg)。动画同时把 X 和 Y 各转 360 度，所以看起来是翻滚，而不是绕轴自转。
What to change可以改的地方
- 1Animate only rotateY for a record-player spin instead of a tumble.
- 2Add a subtle box-shadow to each face so the seams catch the eye as it turns.
- 1只转 rotateY，就变成唱片式的自转。
- 2给每个面加一点 box-shadow，翻转时棱角会更清楚。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。