transform-style: preserve-3d是立方体旋转的关键，因它确保子元素z轴坐标不被拍平；必须设在.cube上，配合.scene的perspective，再通过translatez与rotatex/y精确定位六面。
为什么 transform-style: preserve-3d 是立方体旋转的关键
不加这句，子元素的 3D 变换会“拍平”到父容器平面，导致旋转时六个面全挤在一起、看不到纵深。它不是让元素变 3D 的开关，而是告诉浏览器：“别把子元素的 3D 坐标给我压扁成 2D，保留它们各自的 Z 轴位置”。
常见错误是只给立方体容器（比如 .cube）加了 preserve-3d，却忘了它的父容器（比如 .scene）也必须加——否则整个立方体仍会被拍平。
立方体六个面的定位必须用 translateZ + rotateX/Y
每个面都是正方形，大小一致，靠位移和旋转“撑开”成箱体。核心逻辑是：先沿 Z 轴平移半个边长，再绕 X 或 Y 轴旋转 90°，让面正对观察者方向。
例如正面不需要旋转，但要 translateZ(100px)；背面则需 rotateY(180deg) + translateZ(100px)；顶面是 rotateX(90deg) + translateZ(100px)……漏掉 translateZ 就会所有面叠在原点，转起来像一团乱码。
-
.face.front→transform: translateZ(100px) -
.face.back→transform: rotateY(180deg) translateZ(100px) -
.face.top→transform: rotateX(90deg) translateZ(100px) -
.face.bottom→transform: rotateX(-90deg) translateZ(100px) -
.face.left→transform: rotateY(-90deg) translateZ(100px) -
.face.right→transform: rotateY(90deg) translateZ(100px)
父容器必须设 perspective，且不能写在立方体上
perspective 决定“你离 3D 场景多远”，值越小，近大远小越明显；值越大，越像平行投影。它必须作用在立方体的**直接父容器**（如 .scene），而不是 .cube 自身——否则每个面都按自己的 perspective 渲染，视觉错乱。
典型错误配置：.cube { perspective: 1200px; transform-style: preserve-3d; } —— 这完全无效，perspective 在 transform-style 上不起作用。
正确写法示例：
.scene {
perspective: 1200px;
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-20deg);
}
动画卡顿或闪烁？检查 backface-visibility 和硬件加速
快速旋转时，某些面可能因渲染顺序翻转而闪烁，尤其在 Safari 或旧版 Chrome 中。给每个面加 backface-visibility: hidden 可避免背面被绘制（省资源，也防闪）。
另外，确保 .cube 或其动画属性触发 GPU 加速：要么加 transform: translateZ(0)，要么用 will-change: transform。但别滥用 will-change，只在真正动画的元素上加。
- 每个
.face都应有backface-visibility: hidden - 动画主体（
.cube）建议加transform: translateZ(0)触发合成层 - 避免对
top/left等布局属性做动画——它们强制重排，必然掉帧
最易被忽略的是层级嵌套关系：.scene → .cube → .face，三层缺一不可，且 preserve-3d 必须出现在 .cube，perspective 必须出现在 .scene。少一层或放错位置，3D 效果就彻底失效，但控制台不会报错，只能靠逐层检查 computed style 中的 transform 相关属性来验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
