视口单位（vh/vw）才是控制3D立方体“远近感”的关键，因px值无法随屏幕缩放动态调整透视距离；需配合transform-style: preserve-3d、统一transform-origin、正确使用translateZ及requestAnimationFrame优化性能。
透视距离为什么不能写死成 px 值
视口单位（vh/vw）才是控制 3D 立方体“远近感”的关键。用 px 写死 perspective，比如 perspective: 500px，在小屏上会显得旋转太夸张、元素飞出去；大屏又显得扁平、没立体感——本质是透视原点离容器的距离没随屏幕缩放动态调整。
实操建议：
- 把
perspective改成类似perspective: 40vh，让透视距离始终是视口高度的 40% - 避免用
100vh，它常因地址栏/底部工具栏导致计算偏差；90vh或85vh更稳 - 如果立方体内容有文字，注意
font-size也得用vw或clamp()配合，否则小屏字会糊成一片
transform-style: preserve-3d 漏掉就全白搭
这是让子元素真正“继承”父级 3D 空间的开关。漏掉这句，所有 rotateX/rotateY 都会在 2D 平面里压平，看着像翻页动画，不是立体旋转。
常见错误现象：六个面明明写了不同 transform，但只看到正面和背面叠在一起，侧面完全不出现。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须加在立方体容器（即包裹六个面的父
div）上，不是加在每个面上 - 确保父容器没有触发层叠上下文的属性干扰，比如
overflow: hidden会剪掉伸出的面 - 如果用了
backface-visibility: hidden，记得每个面都单独加，不然翻转后可能透出背面内容
旋转轴心点偏移导致立方体“漂移”
默认 transform-origin 是元素中心，但立方体六个面的定位依赖统一的旋转中心（通常是整个立方体几何中心）。如果各面的 transform-origin 不一致，或没配合 translateZ 把它们推到正确深度，旋转时就会晃动、错位。
使用场景：用绝对定位 + transform: translateZ() 摆放六个面时，每面的 transform-origin 必须保持为 center center，且 translateZ 值要对称（如 ±100px）。
实操建议：
- 立方体容器设
transform-style: preserve-3d，同时设transform-origin: center center - 每个面的
transform写法统一格式，例如：rotateY(90deg) translateZ(100px)，注意顺序：旋转在前，位移在后 - 别用
top/left+margin模拟深度，CSS 3D 只认translateZ
移动端 touch 旋转卡顿或失效
纯 CSS @keyframes 动画没法响应手指拖拽，而 JS 控制 transform 时若直接改 style.transform，在 iOS Safari 上容易掉帧甚至卡死——尤其配合 perspective 和多层嵌套时。
性能影响：每次重排会强制重算整个 3D 矩阵，比单纯改 translate3d 开销大得多。
实操建议：
- 用
requestAnimationFrame节流旋转更新，别在touchmove里直接赋值 - 只更新
rotateX和rotateY的角度值，其他不变量（如translateZ）写死在 class 里 - 给立方体容器加
will-change: transform，但别滥用——仅在旋转活跃时动态添加
最易被忽略的是 perspective-origin 的默认值。它默认是 50% 50%，看起来没问题，但一旦容器有 padding 或 border，或者用了 flex 居中，实际视觉中心就偏了。真要调准，得用 perspective-origin: center center 显式锁定，而不是赌默认值。
