必须为正方体直接父容器设置 transform-style: preserve-3d 以保留子元素Z轴坐标，否则6个面将被拍平；配合 perspective（500px–1200px）、正确 translateZ(50px) 与 rotateX/Y 定位各面，并对 .cube 容器整体做 rotateX/Y 双轴动画。
用 transform-style: preserve-3d 启用真正的3D空间
不加这行，所有子元素都会被“拍平”到同一个平面，旋转时看起来像纸片翻转，不是立体正方体。它告诉浏览器：别把子元素的Z轴坐标丢掉，要保留三维关系。
常见错误是只给父容器设 transform，但忘了设 transform-style，结果6个面挤在一块儿动，根本看不出立方体结构。
- 必须作用在正方体的直接父容器（比如
.cube）上 - 值只能是
preserve-3d，flat是默认值，等于没开3D - IE11 及更早版本不支持，如需兼容可降级为2D模拟
让6个面正确定位到立方体表面，靠 translateZ 和 rotateX/Y
每个面不是随便放，而是通过组合平移和旋转，把它们“钉”在正方体六个面上。核心是：先用 translateZ(50px) 把面推出去一半边长距离，再根据朝向做基础旋转。
例如前面不需要额外旋转，后面要 rotateY(180deg)，顶面要 rotateX(90deg)——这些角度不是凭感觉写的，而是由面法向量决定的。
- 假设正方体边长为
100px，则半边长是50px，所有translateZ()都用这个值 - 左面用
rotateY(-90deg)，右面用rotateY(90deg)，注意方向别反 - 务必给每个面设
position: absolute，否则无法精准叠放
自动旋转靠 @keyframes + transform: rotateX() rotateY()
只对 .cube 容器做动画，不要给每个面单独加动画，否则会错乱。旋转轴选 rotateX(360deg) 和 rotateY(360deg) 同时进行，才能看到连续滚动效果。
如果只写一个轴，正方体会“绕着一根棍子转”，缺少纵深感；两个轴叠加才接近真实观察视角。
- 动画时间建议设
duration: 12s或更长，太快会导致视觉混乱、看不出结构 - 用
ease-in-out比linear更自然，避免机械感 - 别忘了加
transform-origin: center，否则旋转中心可能偏移
实际渲染出不来？检查 perspective 和容器尺寸
perspective 必须设在 .scene 这类外层容器上，不能设在 .cube 上。值太小（如 100px）会让正方体严重畸变，太大（如 5000px）又像看地图，失去立体感。一般 500px–1200px 比较稳妥。
另一个高频问题是容器没设宽高或 overflow: hidden，导致面溢出、旋转时页面抖动。
-
perspective单位必须是长度单位（px、rem），不能用无单位数字 -
.scene需要有明确width和height，否则transform-origin计算失准 - 加
overflow: hidden能截掉旋转过程中短暂出现的边缘撕裂
正方体看着简单，但每个面的初始定位、transform-style 的作用层级、perspective 的施加位置，三者稍有错位就完全失效——调试时最好先关掉动画，手动改 transform 值，确认六个面各就各位再启动旋转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
