transform-style: preserve-3d 是魔方旋转的前提，不加则子元素被强制扁平渲染，z轴位移和旋转全失效；必须作用于魔方容器（如.cube），并配合外层容器设置perspective以建立真实3d空间。
为什么 transform-style: preserve-3d 是魔方旋转的前提
不加这句，所有子元素的 transform 都会在父容器平面内“拍平”，Z轴位移和旋转全失效——你看到的只是6个正方形在2D里乱转，根本叠不成魔方。它不是可选项，是开关。
常见错误：transform-style 写在魔方最外层容器（比如 .cube）上，但它的父级（比如 .scene）没设 perspective，结果还是没立体感。必须两者配合：.scene 设 perspective 控制观察距离，.cube 设 preserve-3d 让6个面真正拥有Z轴空间。
-
perspective值建议 800px–1200px：太小（如 200px）会夸张畸变，太大（如 5000px）接近平行投影，失去深度 - 别把
preserve-3d错写成flat（这是默认值，等于没开） - 动画中若动态增删面，需确保新增元素也继承该样式，否则新面会被拍平
6个面的定位：用 translateZ + rotateX/Y 构建正方体
每个面都是相同尺寸的正方形（比如 100px × 100px），靠 translateZ 拉出前后位置，再用 rotateX 或 rotateY 调整朝向。关键不是“怎么转”，而是“初始朝向必须准确”——否则一动就散架。
示例（以中心点为原点，边长 100px）：
.face.front { transform: rotateY(0deg) translateZ(50px); }
.face.back { transform: rotateY(180deg) translateZ(50px); }
.face.right { transform: rotateY(90deg) translateZ(50px); }
.face.left { transform: rotateY(-90deg) translateZ(50px); }
.face.top { transform: rotateX(90deg) translateZ(50px); }
.face.bottom { transform: rotateX(-90deg) translateZ(50px); }
-
translateZ(50px)是因为半边长 = 100px / 2；改边长必须同比例调整此值 -
rotateX/rotateY角度必须严格为 ±90°/180°，少1°都会导致面不垂直、缝隙露白 - 所有面需共用同一
transform-origin: center（默认即如此），否则旋转轴偏移，立方体扭曲
让魔方整体旋转：只动 .cube，不动单个面
动画控制对象必须是包裹6个面的 .cube 容器，对它加 rotateX/rotateY。如果直接给每个面加动画，它们会各自绕自己中心转，彻底脱离立方体结构。
典型错误写法：.face { animation: spin 8s infinite linear; } → 6个面独立打转，像撒豆子。
- 正确做法：用一个
@keyframes cube-spin定义.cube的复合旋转，例如rotateX(30deg) rotateY(45deg) - 想响应鼠标拖拽？监听
mousemove，实时更新.cube的style.transform，而非操作单个面 - 性能提示：给
.cube加will-change: transform，避免每帧重绘整个场景
Chrome/Firefox/Safari 渲染差异与兼容性补丁
Firefox 对 preserve-3d 的子元素 backface-visibility 更敏感；Safari 在旧版本（iOS 15.4前）有 transform-style 继承 bug；Chrome 最稳定但开启硬件加速后偶尔闪白边。
- 强制隐藏背面：每个面加
backface-visibility: hidden，防止翻转时看到背面内容（尤其当面有背景色或图片） - Safari 兼容写法：在
.cube上同时写transform-style: preserve-3d和-webkit-transform-style: preserve-3d - 边缘锯齿？给
.cube加transform: translateZ(0)（触发GPU渲染），或用outline: 1px solid transparent抗锯齿
魔方结构本身简单，但 Z 轴精度、坐标系一致性、浏览器渲染管线差异，三者叠加后，一个像素的 translateZ 偏差或一度的旋转误差，就会让六个面在旋转中错位、漏光、穿模。动手前先校准原点和尺寸比例，比调动画更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
