transform-style: preserve-3d 必须设在立方体的直接父容器上，配合 perspective（作用于祖先wrapper）才能实现真实3d旋转；rotatex/rotatey方向依xyz坐标系而定，rotatez仅为2d自旋，无法产生立体感。
transform-style: preserve-3d 是绕中心旋转的前提
不加这句，子元素的 3D 变换会“压平”到父容器平面，看着像在转，其实只是 2D 缩放+位移。立方体六个面永远挤在同一层，转不出立体感。
常见错误现象：rotateX 或 rotateY 动画跑起来像在抖，或者只看到一个面来回晃，背面完全不出现。
- 必须设在立方体的**直接父容器**上（通常是包裹
.cube的那个div） - 该父容器不能有
overflow: hidden，否则被转到背面的面会被裁掉 - 不要设在
.cube自身上——它负责自身旋转，但 3D 空间上下文得由它的父级提供
rotateX/rotateY 的数值单位和方向容易搞反
写 rotateX(90deg) 是让元素绕水平轴向前翻，不是“抬头”。初学者常以为正数是逆时针，但在 3D 中，方向取决于坐标系：X 轴向右、Y 轴向下、Z 轴指向屏幕外。所以 rotateX(90deg) 实际是“上边向里折”，看起来像顶部朝你倒过来。
- 绕 Y 轴转：用
rotateY(45deg)模拟左右偏头视角 - 绕 X 轴转：用
rotateX(-30deg)模拟微微仰视（负值更符合直觉） - 同时转两个轴？直接写
rotateX(-20deg) rotateY(45deg)，顺序影响最终朝向（先 Y 后 X 和先 X 后 Y 结果不同）
perspective 决定“镜头远近”，不是加在立方体上
perspective 必须作用在**观察者所在的位置**，也就是立方体的祖先容器（通常是最外层 wrapper），而不是 .cube 本身。设在立方体上会导致每个面各自有不同透视，变形失真。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：立方体边缘扭曲、面与面之间错位、转到侧面时突然拉伸或压缩。
- 推荐值：
perspective: 1000px—— 太小（如 200px）会夸张变形，太大（如 5000px）接近正交投影，失去纵深感 - 配合
transform-style: preserve-3d才生效；单独加没用 - 如果整个页面多个 3D 组件，统一用一个 wrapper 控制 perspective，别每个都设
rotateZ 不会让立方体“绕自身中心转”，而是绕 Z 轴自旋
很多人想让立方体像陀螺一样竖着转，就加 rotateZ(360deg)，结果发现它只是平面旋转——因为 Z 轴垂直于屏幕，绕它转等同于 2D 旋转，六个面仍在同一深度，看不出立体。
真正“绕中心轴”的效果，得靠组合：比如让立方体先绕 Y 轴转一圈（rotateY(360deg)），再用 transform-origin: center 确保旋转锚点在几何中心（默认就是 center，但显式写上更稳妥）。
- 检查
.cube是否设置了transform-origin: center（虽然默认如此，但若父容器有 transform，可能干扰） - 动画中用
transform: rotateX(...) rotateY(...)连写，比分开 transition 更可靠 - 别依赖
rotateZ实现立体旋转——它只在 XY 平面内有效
最易被忽略的是：所有面的 transform 都得基于同一个坐标系原点。一旦某个面用了 translateZ 却没配对抵消，整个立方体就会漂移。绕中心转，前提是六个面严格对称布局、原点对齐、无意外偏移。
