纯css实现3d折叠轮播的关键在于精准控制transform-origin、backface-visibility、perspective与transform-style的协同；js仅负责class切换，所有动画逻辑由css定义。
纯 CSS 就能做出 3D 折叠轮播效果，但关键不是“怎么加 transform”，而是怎么让折叠轴对齐、不翻车、不闪烁。JS 只负责切换状态，所有动画和层级必须交由 CSS 控制。
transform-origin 必须精确匹配折叠中心线
3D 折叠（比如卡片沿 Y 轴对折）的视觉真实感，完全取决于 transform-origin 是否落在图片正中间垂直线上。设成 50% 50% 是常见错误——它会让折叠轴穿过整个容器，而不是单张图的中线。
- 每个
.carousel-item需单独设transform-origin: center;或transform-origin: 50% 50%;（注意：这是相对于自身盒模型，不是父容器） - 若用
rotateY(180deg)模拟翻转，transform-origin: 50% 50%;才能让左右半边绕中线对称折叠 - 在 Safari 中，
center不被支持，必须写死为50% 50% - 如果用了
scale()或translateZ()影响了元素尺寸，transform-origin基准仍以原始盒模型为准，别被视觉错觉带偏
backface-visibility: hidden 是防闪底线
折叠到背面时 Chrome/Edge 会直接丢弃渲染，导致“啪一下消失”，用户看到的是空白或错位。这不是 bug，是浏览器默认行为。
- 必须给执行旋转的元素（即
.carousel-item）加backface-visibility: hidden; - 不能只加在父容器上——它只控制子元素的背面是否绘制，不作用于自身
- 老版 Safari 需补
-webkit-backface-visibility: hidden; - 这个属性不影响正面显示，也不影响点击穿透；加了之后背面不可见但仍在布局流中，事件仍可捕获
perspective 和 transform-style 必须成对出现在同一级容器
漏掉任意一个，3D 效果就退化成 2D 平移或堆叠，而且很难排查——因为 DOM 看起来没报错，只是“不动”或“错位”。
-
perspective: 1200px;必须加在直接包裹.carousel-item的父容器上（如.carousel-track），不是最外层.carousel-container - 同一容器上必须同时声明
transform-style: preserve-3d;，否则子项的rotateY()会被拍平 - 安卓微信 WebView 中，有时需额外加
transform: translateZ(0);强制 GPU 加速，否则折叠卡顿 -
perspective值不是越大越好：500px 更“近”、折叠感强；2000px 更“远”、过渡柔和；超过 3000px 几乎看不出纵深
别在 JS 里拼 transform 字符串
写 el.style.transform = `rotateY(${angle}deg)` 是性能和维护双坑：竞态难调试、transition 失效、无法利用硬件加速、CSS 变量无法介入。
- JS 只做一件事：切换 class，例如
item.classList.replace('active', 'next') - 所有角度、位移、透明度都通过预设的 class 在 CSS 里定义，比如
.carousel-item.next { transform: rotateY(-90deg) translateZ(200px); } - 用
transition: transform 0.4s ease, opacity 0.4s ease;统一控制动效节奏，比 JS 定时器更稳 - 若需动态角度（如扇形布局），用 CSS 自定义属性 +
calc()，例如--angle: 72deg;，再写transform: rotateY(calc(var(--angle) * 2)) translateZ(650px);
真正难的不是写出折叠动画，而是让每张图的折叠轴、视觉层级、GPU 渲染通道全部对齐。一个 backface-visibility 漏写，或 transform-origin 设在父容器上，就能让整套逻辑静默失效——它不报错，只“看起来不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
