纯 CSS 无法实现真正意义上的三维立体旋转轮播图，因其缺乏全局坐标系、透视响应能力差、浏览器兼容性问题多且无障碍支持为零；Three.js + GSAP 才能稳定构建可维护的环形 3D 轮播。
纯 CSS 无法实现真正意义上的三维立体旋转轮播图（比如沿 Y 轴连续翻转的环形轨道），transform-style: preserve-3d 和 transform 的组合虽能模拟，但滚动逻辑、透视控制和浏览器兼容性会让它在实际项目中极易出错——尤其当需要响应式、自动播放或键盘导航时。
为什么不用纯 CSS 实现环形 3D 轮播
CSS 的 transform 对每个元素独立计算，没有全局坐标系；轮播项绕圆排列需手动算角度、半径、rotateY 和 translateZ，一旦数量变化或容器缩放，所有值都要重调。更关键的是：
-
perspective必须设在父容器上，且不能动态响应视口变化 - Chrome/Safari 对
preserve-3d在overflow: hidden下的裁剪行为不一致，常出现“穿帮”或闪烁 - 无法监听真实的 3D 旋转角度，导致“当前项”状态难以准确判断
- 无障碍支持为零：屏幕阅读器完全无法理解这种视觉映射
用 Three.js + GSAP 做可维护的 3D 轮播
Three.js 提供真实 3D 场景和相机控制，GSAP 负责时间轴与缓动，二者配合才能稳定驱动环形轨道。核心不是“画个圈”，而是建立可更新的实例系统：
- 用
THREE.Group作为轮播环的根节点，所有卡片是它的子对象 - 每张卡片用
THREE.Mesh包裹，材质启用transparent: true避免背面遮挡 - 旋转靠
group.rotation.y += delta，而非逐个设置rotation—— 这样所有卡片自动跟随轨道 - 当前焦点项通过
Math.atan2(z, x)反算角度，再取模归一化到 [0, 2π)，比 CSS 的getBoundingClientRect()计算可靠得多
示例关键逻辑（非完整代码）：
立即学习“前端免费学习笔记（深入）”；
const group = new THREE.Group();
scene.add(group);
cards.forEach((card, i) => {
const angle = (i / total) * Math.PI * 2;
card.position.x = Math.cos(angle) * radius;
card.position.z = Math.sin(angle) * radius;
group.add(card);
});
// 每帧更新
group.rotation.y += 0.01;
降级方案：CSS 3D + 精确数学定位（仅限静态/少项）
如果必须用纯 HTML/CSS（例如邮件模板、轻量 landing page），只建议用于 ≤5 张图、固定尺寸、无交互的场景。重点在于规避常见透视陷阱：
-
perspective值不能写死像素，推荐用calc(50vh)或 JS 动态设为容器宽高的 2–3 倍 - 每张卡片的
transform必须包含rotateY()+translateZ()，顺序不能颠倒（否则旋转中心偏移） - 禁用
will-change: transform，它在 Safari 中会导致preserve-3d失效 - 用
@keyframes写动画时，关键帧必须从0%到100%完整定义，不可省略中间态，否则 Firefox 渲染错乱
典型错误样式（会导致卡片堆叠在一点）：
.card { transform: translateZ(200px) rotateY(30deg); } /* ❌ 顺序错 */
.card { transform: rotateY(30deg) translateZ(200px); } /* ✅ 先旋转，再沿新 Z 轴平移 */
真要上线立体轮播，Three.js 是目前唯一能兼顾控制精度、运行时更新和跨设备稳定的路径；所谓“纯 HTML 实现”，本质是用大量 hack 掩盖底层缺失的能力——而这些 hack 正是线上事故最常发生的温床。
