前端代码：纯 CSS 版本的 3D 环形轮播（倒影版）

一屏展现 3D 英雄环形轮播（旋转木马）：乐高风格角色在霓虹暗调背景中缓缓巡游，卡片自带倒影与悬停聚焦。纯 HTML + CSS（无框架、无 JS），用 sibling-index() / sibling-count() 自动算位，开箱即用，适合炫酷产品 Demo、展厅或课程示例。

模板亮点

• 3D 环形 + 倒影：perspective 场景让卡片立体旋转，-webkit-box-reflect 生成镜面倒影。
• 自动计算：借助 sibling-index() / sibling-count() 获取索引与总数，省去手写变量，旧浏览器提供 fallback。
• 微交互：悬停暂停全局旋转、非悬停卡片降噪，标签随轨迹同步旋转；部分角色带独立缩放/降落动画。
• 设计调性：深色赛博基底配霓虹光感描边，突出科技与收藏感。
• 轻量实现：单一 CSS 文件，利用 @layer、@property 和现代选择器，易读且便于二次改造。

适用人群与场景

• 科技/娱乐产品：用作首页 Hero、活动专题或炫酷看板。
• 展示型 Demo：展会屏幕、投融资或路演 PPT 内嵌炫技动效。
• 课程/培训：讲解 CSS 3D、sibling-index/count、倒影与 @layer 的教学示例。
• 作品集与品牌展示：替换图片与品牌文字即可快速上架。

设计与色彩

• 背景：深黑灰基底降低噪点，突出主角。
• 光感：霓虹蓝绿光晕、描边和倒影营造科技感。
• 角色：乐高质感图片，明亮配色与暗背景形成强对比。

文件结构

• index.html：页面骨架、中文文案与卡片列表。
• style.css：3D 轮播、倒影、光感细节、响应式尺寸与交互。

使用方式

1. 直接打开 index.html 预览；或通过本地静态服务器查看。
2. 将卡片图片地址替换为你的角色/产品图，改写 data-title 文案；如需品牌露出，可在头部进行添加。
3. 需要调整速度或尺寸，可修改 --carousel-duration、--card-width、--card-height 等变量。
4. 若目标环境不支持 sibling-index/count，CSS 已内置 fallback，亦可手动设置卡片索引。

自定义建议

• 调色：调整霓虹渐变与背景色，匹配品牌主色。
• 动效：增加更多 @keyframes（如呼吸光、粒子）或修改 hover 缓动曲线。
• 布局：.scene 尺寸可按屏幕比例微调，文字说明可替换为产品卖点或 CTA。