CSS 3D轮播可用rotateX/Y与perspective模拟纵深，无需WebGL；须在容器设perspective、子项设transform-style: preserve-3d，用rotateY+translateZ实现环形布局，动态更新transform值，配合opacity过渡和硬件加速优化性能。
用 CSS 3D transform 实现轮播，别碰 WebGL
纯 HTML/CSS 能做“3D 轮播”，但不是真 3D 渲染——它靠 transform: rotateX()、rotateY() 和 perspective 模拟立体感。强行上 three.js 或 WebGL 对简单轮播是过度设计，加载慢、兼容差、维护成本高。真正要的只是视觉纵深和自然过渡，CSS 3D 完全够用，且支持 SSR 和静态导出。
必须设置 perspective 和 transform-style: preserve-3d
这两个属性漏掉一个，3D 效果就彻底失效，元素会扁平堆叠或错位。常见错误是只在容器加 perspective，却忘了子项需显式声明保持 3D 空间：
-
perspective必须加在轮播容器（如.carousel）上，值建议1000px～2000px；太小会畸变，太大则看不出深度 - 每个轮播项（
.carousel-item）必须设transform-style: preserve-3d，否则子元素的 3D 变换会被拍平 - 所有旋转/位移操作都得用
transform统一写，不要混用left/top或margin
rotateY() + translateZ() 构成环形布局
所谓“旋转木马”，本质是把 N 个元素等角度分布在圆周上。不用三角函数手动算坐标，直接用 CSS 的 3D 变换来“摆位置”：
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
.carousel-item:nth-child(2) { transform: rotateY(45deg) translateZ(300px); }
.carousel-item:nth-child(3) { transform: rotateY(90deg) translateZ(300px); }
/* 依此类推，总角度 = 360° / item 数量 */关键点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
translateZ()决定半径大小，值越大“圆”越宽，但过大会超出视口 - 旋转角度必须严格等分，否则视觉错乱；动态轮播时，用 JS 更新每个项的
transform值即可，不重排 DOM - 别用
rotateZ()试图“翻转卡片”，那只是二维旋转，没纵深感
自动轮播卡顿？关掉 will-change 或改用 transform + opacity
滚动一卡一顿，大概率是浏览器没开启硬件加速，或触发了 layout。常见误区是给所有项加 will-change: transform，结果内存暴涨、动画反而更卡：
- 只对当前正在动的项加
will-change: transform，动完立刻移除 - 避免在动画中读取
offsetLeft、getBoundingClientRect()等触发同步 layout 的操作 - 淡入淡出用
opacity，别用visibility或display切换，后者会破坏 3D 渲染上下文 - Chrome/Firefox 对
transform+opacity的合成层优化最好，Safari 需额外加-webkit-transform: translateZ(0)强制 GPU 加速
3D 轮播真正的难点不在“怎么转”，而在“怎么让每一帧都落在 60fps 上”——布局抖动、隐式合成、paint 面积过大，任何一个都会拖垮体验。先跑通逻辑，再逐项测 performance 面板里的 FPS 和渲染耗时。
