transform-style: preserve-3d 是旋转魔方的必要条件，不加则子元素被强制扁平渲染，所有3D变换失效；必须作用于魔方容器，且需避免 overflow: hidden 和错误设置 backface-visibility。
transform-style: preserve-3d 是旋转魔方的必要条件
不加这句，子元素永远扁平渲染，再套多少 rotateX rotateY 都只是 2D 假旋转。浏览器默认把每个元素当纸片处理，父容器不主动声明“我要建个 3D 空间”，所有子元素的 transform 都会被拍平到父容器平面。
实操建议：
- 必须加在魔方容器（即包裹 6 个面的父
div）上，不是加在单个面上 - 父容器不能有
overflow: hidden，否则会裁掉伸出平面的面（比如旋转后背面移出原区域） - 如果父容器用了
backface-visibility: hidden，记得也加在子面上，否则翻转 180° 后可能突然消失
CSS 3D 坐标系方向容易和直觉相反
Z 轴正方向是朝向屏幕外（人眼方向），负方向才是伸进屏幕里。所以 translateZ(50px) 是把面往前“推”出来，而不是“塞进去”。很多初学者调 perspective 和 translateZ 时反复失败，就是卡在这点上。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 魔方看起来像被压扁的盒子，所有面挤在一层 ——
perspective值太小（如100px），改成800px或更大更自然 - 旋转后某个面完全看不见 —— 它的
transform计算后 Z 坐标为正且超出perspective范围，被裁掉了 - 用
rotateY(90deg)后面“消失”，其实是它正对视线但没设backface-visibility: visible，默认被隐藏
rotateX/rotateY/rotateZ 的顺序影响最终朝向
CSS 的 3D 变换是右乘顺序：写在后面的变换先执行。比如 transform: rotateX(30deg) rotateY(45deg)，实际是先绕 Y 轴转，再绕新 X 轴转（不是原始坐标系的 X）。这和数学里矩阵左乘习惯相反，容易误判结果。
使用场景与建议：
- 做魔方单层旋转时，优先用
rotateX或rotateY单轴操作，避免复合旋转失控 - 若需精确控制（如还原某一面），建议统一用
rotate3d(x, y, z, a)，明确指定轴向量，比堆叠rotateX/rotateY更可预测 - 动画中连续触发多个
rotate时，浏览器不会自动插值中间姿态，可能出现跳变 —— 改用transform: rotate3d(...)+transition更稳
移动端 Safari 对 3D transform 的兼容性陷阱
iOS 15.4 之前，transform-style: preserve-3d 在 position: fixed 或某些 will-change 组合下会失效；iOS 16.4 开始又修复了一部分，但仍有边界问题。
实操建议：
- 避免在魔方容器上同时用
position: fixed和preserve-3d，改用position: absolute+ 父容器overflow: visible - 不要给魔方容器设
will-change: transform，Safari 会直接降级为 2D 渲染 - 真机调试时发现某面“闪一下就没了”，大概率是
backface-visibility缺失或transform中混用了scale导致矩阵奇异（尤其在 iOS 15.x）
空间坐标系不是画布上的辅助线，它是浏览器渲染管线里真实参与矩阵计算的坐标系统。调错一个 translateZ 符号，或漏掉一行 preserve-3d，整个魔方就塌成一张海报 —— 这种事发生得比想象中更频繁。
