纯CSS+HTML可实现3D轮播动画，但JS必需用于状态切换与交互；perspective需与transform-style: preserve-3d配对使用于同一容器，backface-visibility: hidden是翻转不闪烁的关键，定位方式决定立方体或扇形布局，transform-origin须精准匹配旋转中心。
直接用纯 CSS + HTML 就能做出可运行的 3D 轮播效果，不需要 JS 驱动动画本身；但 JS 是必须的——用来切换当前项、更新 class、处理按钮点击和键盘事件。不写 JS 的“轮播”只是个静态 3D 模型。
perspective 和 transform-style 必须配对使用
只在容器上加 perspective: 1000px 不够，子元素（比如 ul 或 .carousel-inner）必须显式声明 transform-style: preserve-3d，否则所有 rotateY()、translateZ() 都会扁平化成 2D 效果。
- 常见错误：把
perspective写在body或最外层div上，但忘了给直接做 3D 变换的父容器加transform-style - 安卓微信 WebView 中，有时需额外加
transform: translateZ(0)强制 GPU 加速，否则旋转卡顿或闪烁 -
perspective值不是越大越好：设成500px会让旋转更“近”、纵深感强；设成5000px就接近平行投影，像看一张微倾的海报
backface-visibility: hidden 是翻转类轮播的保命设置
做卡片翻转（rotateY(180deg)）时，如果没给每个轮播项加 backface-visibility: hidden，Chrome 和新版 Edge 在翻转到背面瞬间会直接丢弃渲染，导致“闪一下就消失”，用户看到的是空白或错位。
- 这个属性必须加在执行旋转的元素上，比如
.carousel-item或li，而不是它的父容器 - 它不影响正面显示，只控制背面是否绘制；加了之后，背面不可见但依然参与布局和事件捕获（如
click） - 某些老版 Safari 需要加前缀
-webkit-backface-visibility: hidden
定位方式决定是“立方体”还是“扇形”轮播
两种主流布局逻辑，选错会导致旋转中心偏移、图片重叠错乱：
立即学习“前端免费学习笔记（深入）”；
- 立方体式：所有
li绝对定位叠在同一点，靠translateZ()+rotateY()排列成环形 —— 适合固定数量（如 5 张）的等距轮播 - 扇形式：用
transform: rotateY(n * 72deg) translateZ(650px)把每张图“甩”到圆周上，再统一用父容器rotateY()控制视角 —— 更易做无限循环，但需要 JS 动态计算角度 - 别混用：比如给
li加了left: 0; top: 0绝对定位，又同时设margin-left，会导致transform基准偏移，旋转轴飘走
JS 只管状态，别碰 transform 数值
轮播逻辑应完全基于 class 切换，而不是在 JS 里拼 element.style.transform = `rotateY(${angle}deg)`。后者极易出竞态、难维护、无法利用 CSS transition 硬件加速。
- 推荐模式：JS 只负责增删
active、next、prev这类语义 class，所有位移/旋转/缩放全由 CSS 规则定义 - 例如：
.carousel-item.active { transform: translateZ(650px) rotateY(0); }，.carousel-item.next { transform: translateZ(650px) rotateY(72deg); } - 注意：CSS 中
transition必须写在被变换的元素上（如.carousel-item），不能只写在active类里，否则首次进入无动画
最容易被忽略的是：轮播项的 transform-origin 必须精确匹配旋转中心。比如做 Y 轴旋转，却把 transform-origin 设成 top left，那整个立方体会绕左上角狂甩，而不是绕自身中点平稳转动。
