用CSS 3D实现魔方需正确设置perspective（加在容器父元素）、transform-style: preserve-3d、各面绝对定位与translateZ定位，并统一用vmin单位保比例，动画作用于.cube且避免face加transition。
如何用 CSS 3D 实现魔方基本结构
魔方不是靠 transform: rotateX/Y/Z 堆叠六个面就行的——必须先建立正确的 3D 坐标系原点，否则旋转时会“飞出去”。关键在 transform-style: preserve-3d 和 perspective 的配合位置。
-
perspective必须加在魔方容器（比如.cube的父元素）上，不能只加在.cube自身；否则子面无法感知深度 - 每个面（
.face）需用position: absolute定位，并通过transform移动到正方体对应位置，例如前面是translateZ(100px)，后面是translateZ(-100px) - 魔方中心默认在父容器左上角，要用
transform-origin: center+margin: auto或top: 50%; left: 50%; transform: translate(-50%, -50%)居中，否则旋转轴偏移
让魔方随视口缩放且保持比例的关键 CSS
响应式魔方不是简单设 width: 100% 就完事。魔方是三维物体，边长变化会直接影响 translateZ、rotate 的视觉尺度，导致“变扁”或“拉伸”。
- 所有尺寸（边长、位移、
perspective值）统一用vmin单位，例如width: 20vmin; height: 20vmin;，这样在宽屏/竖屏下都能按最小边等比缩放 -
transform: rotateX(0deg) rotateY(0deg)这类动画值不能写死度数，要配合@keyframes用百分比控制节奏，否则缩放后动画速度感突变 - 避免用
vw单独控制宽度——当页面很宽但高度很小时，vw会让魔方撑满宽度却严重压扁，vmin才真正保比例
CSS 动画卡顿或“跳帧”的常见原因
魔方动画卡顿，90% 不是性能问题，而是 CSS 层叠和重绘逻辑没理清。浏览器对 3D 变换的优化很敏感，错一点就掉帧。
- 不要给
.face元素加transition—— 魔方旋转是整体.cube的transform动画，单个面加过渡会导致冲突和重绘抖动 - 动画必须作用在
.cube上，且transform属性值要完整写出，比如transform: rotateX(30deg) rotateY(45deg)，不能只写部分变换，否则浏览器无法 GPU 加速 - 如果用 JavaScript 控制旋转角度，务必用
requestAnimationFrame更新，直接改style.transform在循环里会强制同步重排
移动端触摸旋转的兼容性处理
纯 CSS 动画只能预设路径，真要拖拽旋转就得 JS 配合。但移动端 touch 事件坐标和 CSS 3D 空间不直接对应，容易转反或失灵。
立即学习“前端免费学习笔记（深入）”；
- 别用
touchstart → touchmove直接算角度——手指滑动距离 ≠ 旋转角度，需转换为球面坐标映射，推荐用three.js的OrbitControls逻辑简化 - 若坚持纯 CSS，可用
@media (hover: none)检测触屏设备，关闭自动旋转动画，避免和用户手势冲突 - iOS Safari 对
preserve-3d支持不稳定，必须加-webkit-transform-style: preserve-3d，且父容器不能有overflow: hidden，否则整个 3D 层被裁掉
魔方看着是几何玩具，实际是 CSS 3D 渲染管线的一次压力测试：perspective 位置错一像素，transform-origin 偏一点，或者单位混用 vmin/vw/vh，整个结构就塌。做之前先在 CodePen 上用固定尺寸跑通再加响应式，比后期调试快得多。
