IMAGE & MEDIA
3D Coverflow 轮播Coverflow Carousel
中间图正面放大，两侧图以 3D 透视向后倾斜，像 iTunes 专辑墙。强调「当前选中」的焦点感。
效果预览
常见变体
平面 peek 版Flat Peek Carousel
在低配设备和触屏设备上把 3D 旋转降级为左右露出半张的平面轮播，保证可读性。
极光模板
落日模板
森海模板
卡片带标题版Coverflow with Captions
在卡片底部叠加标题与标签，适合做作品集或模板选择器。
适合用在哪
音乐专辑、作品集封面、商品系列、模板选择器。
不适合：需要快速扫读所有选项的场景：Coverflow 把大部分卡片压扁到侧面，文字难读，也不利于对比；此外卡片比例必须统一，否则透视会乱。
和相近模式的区别
画廊网格Image Gallery Grid
画廊平等地展示所有图片，用户能一眼比较；Coverflow 把焦点压到中间一张，制造「挑选」氛围。如果目标是让用户看到全部，不要用 Coverflow。
Peek 轮播Peek Carousel
移动端 peek 轮播是平面露出半张，强调「还有更多」；Coverflow 通过 3D 透视增强空间感。移动端建议优先用 peek，性能更好、文字可读性更高。
容易踩的坑
- 透视角度超过 55°，两侧卡片上的文字几乎无法辨认。
- 卡片比例不统一，中间与两侧的对齐线断裂，失去封面墙的整齐感。
- 未在 prefers-reduced-motion 下降级，3D 旋转会让前庭敏感用户眩晕。
设计提示词 · Prompt
3D Coverflow 轮播（Coverflow Carousel）：容器 perspective:1000-1200px，中间当前卡片 scale(1)、rotateY(0)、z-index 最高；左右两侧卡片 scale(0.82-0.88)、rotateY(±45-55deg)、translateZ(-120px) 向后推，并降低亮度/饱和度。切换时所有卡片一起沿 X 轴平移，中间卡片交给下一张。卡片宽度 45-55% 容器，aspect-ratio 统一（3:4 或 16:10）。底部放 8px 圆点或缩略图指示器。支持拖拽/滑动和键盘方向键。注意 prefers-reduced-motion 时改为普通横向滚动。
Coverflow Carousel: the container uses perspective:1000-1200px. The center card is scale(1), rotateY(0), and highest z-index; side cards are scale(0.82-0.88), rotateY(±45-55deg), and translateZ(-120px) with reduced brightness or saturation. During a switch, all cards slide along the X axis so the next card moves to center. Card width should be 45-55% of the container with a consistent aspect-ratio (3:4 or 16:10). Add 8px dot or thumbnail indicators below. Support drag/swipe and keyboard arrow keys. Under prefers-reduced-motion, fall back to a plain horizontal scroll.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
.coverflow { position: relative; width: 100%; height: 100%; perspective: 1000px; display: grid; place-items: center; }
.coverflow__track { display: flex; align-items: center; justify-content: center; gap: 14px; transform-style: preserve-3d; }
.coverflow__card { width: 42%; max-width: 160px; aspect-ratio: 3/4; border-radius: 12px; transform: rotateY(45deg) scale(.85) translateZ(-80px); filter: brightness(.8); transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease; position: relative; }
.coverflow__card.is-on { transform: rotateY(0) scale(1) translateZ(0); filter: brightness(1); z-index: 2; }
.coverflow__card:nth-child(1) { transform: rotateY(55deg) scale(.82) translateZ(-100px); }
.coverflow__card:nth-child(3) { transform: rotateY(-55deg) scale(.82) translateZ(-100px); }
.coverflow__card b { position: absolute; left: 10px; bottom: 22px; color: #fff; font-size: 13px; font-weight: 780; }
.coverflow__card span { position: absolute; left: 10px; bottom: 10px; color: rgba(255,255,255,.75); font-size: 9px; }
/* 平面 peek 版 */
.coverflow--flat { perspective: none; }
.coverflow--flat .coverflow__track { overflow: hidden; width: 100%; justify-content: center; }
.coverflow--flat .coverflow__card { transform: none; filter: none; width: 68%; max-width: 180px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.coverflow__card { transition: none; transform: none; filter: none; }
}
演示 HTML 结构
<div class="s s--abs d-coverflow">
<div class="d-coverflow__track">
<div class="d-coverflow__card" style="background:linear-gradient(135deg,#06b6d4,#4f46e5)"></div>
<div class="d-coverflow__card is-on" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"></div>
<div class="d-coverflow__card" style="background:linear-gradient(135deg,#10b981,#0891b2)"></div>
</div>
</div>
无障碍与性能
无障碍
- prefers-reduced-motion: reduce 时取消所有 3D 旋转和缩放，降级为平面横向滚动。
- 键盘支持左右方向键切换，并播报当前选中的卡片标题。
- 不要让旋转角度超过 55°，否则侧面卡片上的文字几乎不可读，也增加前庭敏感用户的不适。
性能
- 3D transform 会提升合成层，但不要在所有卡片上常驻 will-change，只在切换期间临时添加。
- 卡片图片使用统一尺寸和 aspect-ratio，避免布局抖动。
- 移动端 GPU 较弱，建议把 rotateY 角度降到 35° 以下或直接降级为 peek。
常见问题
Coverflow 中间的卡片为什么是正方向，两侧向后倾斜？
这样能让中间卡片保持完整可读，两侧卡片作为背景提示「还有更多」。如果两侧向前倾斜，会遮挡中间卡片。
可以用 CSS scroll-snap 实现 coverflow 吗？
纯 CSS scroll-snap 配合 :has() 或 scroll 选择器（scroll-state）可以实现基础效果，但浏览器支持有限；生产环境建议用 JS 监听滚动位置并动态设置 transform。
常见搭配
同一页面里经常和「3D Coverflow 轮播」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。