不用js计算transform数值，用class切换+css3d属性组合即可实现稳定可维护的3d轮播图；perspective与transform-style:preserve-3d必须成对出现且分别加在最近共同父容器和直接包裹轮播项的容器上；每个轮播项需设position:absolute、backface-visibility:hidden及transform-origin:center，js仅负责class切换以触发css transition硬件加速动画。
直接上结论：不用 JS 计算 transform 数值，用 class 切换 + CSS 3D 属性组合就能做出稳定、可维护的三维轮播图。硬写 element.style.transform = `rotateY(${angle}deg)` 是多数人卡住的根源。
perspective 和 transform-style: preserve-3d 必须成对出现
只加 perspective 不设 transform-style: preserve-3d，子元素的 3D 变换会扁平化；反过来，只设 preserve-3d 不加 perspective，则没有纵深感，所有元素像贴在同一平面上。
-
perspective要加在**最近的共同父容器**上（比如.carousel-container），不是加在每张图上 -
transform-style: preserve-3d必须加在**直接包裹轮播项的容器**上（比如.carousel-inner），否则子元素的 Z 轴位移无效 - 常见错误：
perspective: 1000px写成perspective: 1000（漏单位）或写在.item上导致多个透视中心打架
每个轮播项必须 position: absolute + backface-visibility: hidden
不绝对定位，元素还在文档流里，rotateY 时会相互挤压、错位；不设 backface-visibility: hidden，翻转到背面时可能看到“镜像图”或闪烁。
-
position: absolute的前提是父容器position: relative或position: absolute -
backface-visibility: hidden是防闪烁的关键，尤其在 Safari 和旧版 Chrome 中不可省略 - 别给
.item设margin或left/top偏移 —— 它们的空间位置应完全由transform: translateZ() rotateY()控制
JS 只管 class 切换，别碰 transform 数值
轮播状态用 .active、.next、.prev 这类 class 表达，CSS 里写好对应变换规则。这样动画走 CSS transition 硬件加速，逻辑清晰，无竞态风险。
- 错误做法：
el.style.transform = 'rotateY(180deg) translateZ(600px)'—— 多次点击易叠加、难调试、无法和 transition 配合 - 正确做法：JS 只执行
currentItem.classList.remove('active')和nextItem.classList.add('active') - CSS 示例：
.item.active { transform: rotateY(0) translateZ(650px); }、.item.next { transform: rotateY(72deg) translateZ(650px); }（5 张图时每张间隔 72°） - 注意：一次只能有一个
.active，切换前务必清除旧的，避免多个 active 并存导致样式冲突
最易被忽略的是 transform-origin: center —— 如果没设，rotateY 会绕左上角转，图片像被拧歪；还有 DOM 就绪时机：JS 必须等所有 .item 渲染完成再初始化 class，否则首帧错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
