transform-style: preserve-3d 必须设在父容器（如.dice）上，而非各面；需配合perspective、严格按立方体坐标系定位六面、统一transform-origin并兜底移动端渲染，四者缺一不可。
transform-style: preserve-3d 必须作用在父容器上
很多人写完六个 face 元素后，直接给每个面加 transform，却发现旋转不立体——根本原因是没把 transform-style: preserve-3d 设在骰子的外层容器（比如 .dice）上。它不是给每个面设的，而是告诉浏览器：“这个父元素内部的子元素，要一起参与 3D 空间计算”。
如果漏掉这句，所有子元素会各自扁平渲染，再怎么 rotateX rotateY 都只是二维叠加，没有真实深度感。
实操建议：
• 确保 .dice 元素有明确尺寸（比如 width: 100px; height: 100px;），且设置了 transform-style: preserve-3d
• 同时必须搭配 perspective（可在 .dice 或其父级设，推荐设在更外层，避免重复）
• 不要给 .dice 自身加 transform（除非你真想整体动），否则会影响内部面的坐标系基准
六个面的 transform 定位必须严格对应立方体坐标系
骰子是正方体，六个面需分别置于 ±50px 的 X/Y/Z 轴上（假设边长为 100px）。常见错误是只用 translateZ 排列前后，却忘了上下左右面还要配合 rotateX/rotateY 才能正对视角。
标准定位逻辑（以 Z 轴朝向用户为基准）：
• 前面：translateZ(50px)
• 后面：translateZ(-50px)
• 上面：rotateX(90deg) translateZ(50px)
• 下面：rotateX(-90deg) translateZ(50px)
• 左面：rotateY(-90deg) translateZ(50px)
• 右面：rotateY(90deg) translateZ(50px)
注意：所有面初始都应在原点，靠 transform 移动+旋转到位；若提前用 margin 或 top/left 偏移，会破坏 3D 坐标系
rotateX/rotateY 动画卡顿或跳变，大概率是 transform-origin 没归零
骰子绕自身中心旋转，但 CSS 默认的 transform-origin 是 50% 50%（即元素中心），看似合理——问题出在：当面被 rotateX(90deg) 后，它的“中心”在 3D 空间里已偏移，此时若再动画，浏览器可能按旧坐标系插值，导致抖动或轴心漂移。
稳妥做法：
• 给每个面显式设置 transform-origin: center center（等价于 50% 50%，但更明确）
• 更关键的是：确保所有面的 width/height 一致，且内容居中（用 display: flex; justify-content: center; align-items: center;），否则视觉中心和变换中心不重合
• 动画时优先用 transform: rotateX(...) rotateY(...) 复合写法，避免分步 rotateX 再 rotateY 引起顺序依赖
移动端 touch 旋转骰子时，transform-style 3D 可能失效
部分安卓 WebView（尤其旧版 Chrome）对 transform-style: preserve-3d 支持不稳定，表现为：PC 正常，手机上六个面叠在一起不动。这不是代码错，而是渲染引擎降级所致。
可尝试的缓解措施：
• 在 .dice 上加 backface-visibility: hidden，强制启用 GPU 渲染层
• 为 .dice 添加 -webkit-transform-style: preserve-3d（虽然现代浏览器已不需要，但某些 Android 仍依赖）
• 避免在骰子父容器上使用 overflow: hidden，它会剪裁 3D 子元素的延伸部分，导致面消失
• 实测发现，加一句 will-change: transform 到 .dice 能显著提升移动端 3D 流畅度，但别滥用，仅限动画频繁的元素
perspective、transform-style、六个面的坐标系对齐、以及移动端的渲染兜底这四件事咬合在一起——少一个，就塌回平面。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
