grid-area相同仅实现xy平面重叠，非轮播堆叠；需perspective+preserve-3d启用3d上下文，配合translatez/rotatey模拟纵深错落，并用z-index控制交互层级。
单纯用 grid-area 或 grid-column/grid-row 把多个元素塞进同一格，只能实现静态重叠，不是轮播图——轮播需要「当前项居中显示、其他项错落缩略、支持切换动画」，必须配合 transform 和容器 3D 上下文才能模拟纵深堆叠感。
为什么 grid-area 相同 ≠ 轮播堆叠效果
只写 grid-area: "slide" 让所有卡片落进同一个命名区域，它们确实会重叠，但：
- 全部平铺在 XY 平面，没有前后深度（Z 轴）
- 没有大小/旋转差异，视觉上就是“盖住”，不是“堆叠”
- 切换时无法自然过渡，因为浏览器没启用 3D 渲染管线
常见错误是加了 translateZ(20px) 却没给父容器设 perspective，结果变换被扁平化，完全看不出纵深。
必须开启 3D 渲染上下文
Grid 容器本身不处理 Z 轴，要让 translateZ、rotateY 生效，父容器得主动启用 3D 环境：
-
perspective: 1200px：值越小，纵深感越强；低于 500px 易失真，高于 2000px 效果过弱 -
transform-style: preserve-3d：关键！缺它子元素的 3D 变换会被压平成 2D - 不要对 Grid 容器设
opacity、filter或will-change，这些会意外创建新层叠上下文，截断 z-index 传递
用 grid 定位 + transform 微调每张卡片
Grid 负责把每张卡片“摆到起始位置”，比如都放在第一格中央；transform 负责给每张卡片单独加偏移和旋转，模拟手持一叠卡片时的自然错落：
- 基准卡片（当前展示页）：
transform: translateZ(0) rotateY(0) - 前一张（右侧缩略）：
transform: translateZ(-40px) rotateY(12deg) - 后一张（左侧缩略）：
transform: translateZ(-40px) rotateY(-12deg) - 所有卡片统一用
grid-column: 1 / -1; grid-row: 1 / -1占满容器，确保 XY 基准一致
注意：translateZ 的负值表示“往屏幕里退”，正数反而会让卡片凸出遮挡其他内容，不符合常规堆叠直觉。
z-index 和点击穿透问题
即使视觉上堆叠了，点击事件仍可能穿透到底层卡片：
- 必须给每张卡片加
position: relative，否则z-index无效 - 显式设
z-index：当前页最高（如z-index: 10），缩略页递减（z-index: 5、z-index: 0） - 避免用
pointer-events: none简单禁用底层，这会破坏键盘导航和屏幕阅读器支持 - 真正可靠的交互控制是：只对
z-index最高的卡片绑定点击/触摸事件，其余忽略
最容易被忽略的是层叠上下文隔离——如果轮播容器外还套了一层 transform: scale(0.99) 的 wrapper，整个堆叠就会被截断在局部，再高的 z-index 也盖不住兄弟组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
