z-index无法动画，需用transform: translateZ()和rotateY()模拟3D层叠，配合perspective与手动z-index调控确保层级；transition仅作用于连续属性，须精准控制过渡属性与时机。
transition 无法直接动画 z-index
很多人以为给 z-index 加 transition 就能实现“层叠渐变”，结果发现完全没反应——z-index 是离散整数，浏览器根本不支持对其做插值过渡。真正能过渡的只有 transform、opacity、color 这类连续属性。
所以“3D 层叠感”的核心不是靠 z-index 动起来，而是用 transform: translateZ() 模拟景深，再配合 transform: rotateY() 或位移制造翻转/滑入效果，最后用 z-index 做兜底层序（仅在切换瞬间手动调整）。
- 只对卡片容器设
transform-style: preserve-3d，否则子元素的translateZ无效 -
perspective必须加在父容器上（比如卡片列表外层），不能只加在单张卡片上 - 避免同时用
translateZ和z-index控制同一张卡片的层级——容易冲突，优先靠 transform 定位
卡片切换时 z-index 必须手动更新
当用户点击下一张卡片，视觉上它要“浮到最前”，但仅靠 transform 不足以确保鼠标事件穿透或遮挡关系稳定。这时候就得在 JS 切换逻辑里，显式重置 z-index 值。
常见错误是：所有卡片初始 z-index: 1，切换时只改当前卡片为 z-index: 10，但没把其他卡片降级——导致第二轮切换后层序错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用数组维护卡片顺序，每次切换后遍历所有卡片，按索引倒序赋值
z-index（如第 0 张 1，第 1 张 2…） - 若用 CSS-in-JS 或框架（如 React），注意不要在内联样式里硬写
z-index，改用 class 切换更可控 - 移动端需额外加
touch-action: manipulation，防止 Safari 对高z-index元素触发延迟点击
rotateY + translateZ 组合比纯位移更有立体感
单纯左右滑动（translateX）只是平面切换；加 rotateY(15deg) 和 translateZ(40px) 后，卡片会像真实卡片一样绕 Y 轴旋转+前移，配合 perspective: 1000px，人眼就能感知深度变化。
但要注意：过度旋转会导致内容扭曲变形，尤其文字边缘发虚；translateZ 过大会让卡片缩得太小，过小又没效果。
- 安全范围参考：
rotateY(8deg ~ 18deg)，translateZ(20px ~ 60px)，perspective: 800px ~ 1200px - 必须给卡片设
backface-visibility: hidden，否则翻转时背面内容会闪烁或错位 - Chrome 115+ 对
transform的 3D 分层更严格，若出现渲染异常，可加will-change: transform强制 GPU 加速（但别滥用）
transition 时间与缓动函数要匹配运动意图
卡片“弹出”和“收起”的动效节奏不同：前者需要一点弹性感（比如 cubic-bezier(0.22, 0.61, 0.36, 1)），后者则适合干净利落（ease-out）。如果统一用 ease，切换会显得呆板。
另一个坑是过渡属性写太宽：transition: all 0.4s ease 会让所有变化（包括 background-color、border 等无关属性）都动起来，拖慢性能，还可能干扰焦点状态。
- 精准写法：
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out - 切换开始前先移除旧卡片的
transition（用 class 控制），避免反向动画干扰 - SSR 或首屏渲染时，若卡片初始位置不在视口，记得加
opacity: 0+transform: translateX(100%)防止闪现
真正难的不是堆砌 transform，而是让每张卡片的 perspective、transform-origin、z-index 更新时机严丝合缝——差一帧，立体感就断了。
