transform-style: preserve-3d是3d立方体不“转歪”的前提，必须在立方体容器（如.cube）上显式设置，否则子面被压平至同一z平面而叠成纸片；其父容器（如.scene）还需设置perspective（800px–1200px）以提供透视深度。
为什么纯CSS 3D立方体在相册里容易“转歪”
因为 transform-style: preserve-3d 没加，或者父容器没设 transform-style，导致子元素被压平成2D——所有面都挤在同一个Z平面，旋转时看起来像叠在一起的纸片。相册图一旦用 img 直接塞进面里，还常因默认 display: inline 或未重置 vertical-align 导致错位。
必须确保：立方体容器（比如 .cube）设 transform-style: preserve-3d，且它的父容器（比如 .scene）也要设 perspective，值建议在 800px–1200px 之间；每个面（.face）需绝对定位 + 全尺寸覆盖，并用 transform 单独推到对应位置。
-
.scene要设perspective，不能只靠.cube的transform - 每个
.face必须设position: absolute和width: 100%; height: 100% - 图片用
img时，加display: block; width: 100%; height: 100%; object-fit: cover;防拉伸
六个面的 transform 值怎么配才不穿模
立方体中心在原点，边长设为 200px，那么每面中心到原点距离就是半边长 100px。正面不用移，背面要沿 Z 轴后移 -100px，左面 X 轴左移 -100px……但注意：CSS 中 translateZ(100px) 是“朝你眼睛方向移”，所以背面得是 translateZ(-100px)，否则会跑到前面遮住其他面。
典型配置（假设 .cube 宽高均为 200px）：
.face.front { transform: rotateY(0deg) translateZ(100px); }
.face.back { transform: rotateY(180deg) translateZ(100px); }
.face.right { transform: rotateY(90deg) translateZ(100px); }
.face.left { transform: rotateY(-90deg) translateZ(100px); }
.face.top { transform: rotateX(90deg) translateZ(100px); }
.face.bottom { transform: rotateX(-90deg) translateZ(100px); }
关键点：所有面统一用 translateZ(100px)，靠 rotateX/rotateY 调朝向，而不是混用 translateX/translateY —— 否则绕轴旋转时边缘会错开。
让相册图自动适配各面的三个硬性要求
直接把 <img> 放进 .face 里，不加约束会撑破面、留白或模糊。必须同时满足：
-
.face设overflow: hidden，防图片溢出边框 -
img设display: block; width: 100%; height: 100%，消除行内元素默认间隙 - 必须加
object-fit: cover，否则等比缩放后留黑边；若想居中裁切，再加object-position: center
如果相册图宽高比不一致（比如有竖图有横图），仅靠 cover 可能切掉关键内容——这时得在 JS 里动态加 class 区分方向，或改用背景图配合 background-size: cover 更可控。
动画卡顿或闪动？先关掉 will-change 和检查 repaint 区域
给 .cube 加 animation: rotate 20s infinite linear 后，Chrome 有时会闪屏或掉帧，常见原因是浏览器对频繁重绘的 transform 优化不足。不要盲目加 will-change: transform，它可能引发额外合成层，反而增加内存压力。
更稳妥的做法：
- 确保
.cube和所有.face都设backface-visibility: hidden，减少背面渲染 - 动画只作用于
.cube，别分散到每个面；避免在动画中同时改width/height或margin - 若仍卡，把
perspective从.scene移到.cube上（即用transform: perspective(1000px) rotateX(...)），有时能缓解
移动端尤其要注意：iOS Safari 对嵌套 preserve-3d 支持不稳定，如果立方体嵌在滚动区域里，滑动时可能突然变2D——这种场景建议降级为单面轮播，或用 @supports (perspective: 1px) 做特性检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
