z-index无法实现3D层级动画，真正有效的是transform: translateZ()与perspective配合；z-index仅用于点击穿透和遮挡顺序，且不支持过渡动画；perspective必须作用于父容器而非卡片本身，配合rotateY和translateZ才能产生立体感。
直接给卡片加 z-index 动不了，也出不了 3D 层级感——真正起作用的是 transform: translateZ() 和 perspective 的配合，z-index 只能兜底处理点击穿透和遮挡顺序。
为什么 z-index 不能动画？
浏览器不支持对 z-index 做插值过渡，它是个离散整数。你写 transition: z-index 0.3s 完全无效，卡片层级会突变、鼠标事件错乱、视觉跳变。
- 真正可过渡的属性只有
transform、opacity、color这类连续值 - “浮到最前”的感觉，得靠
translateZ(40px)把卡片往前推，配合perspective: 1000px渲染出景深 -
z-index只在 JS 切换卡片时做一次手动重置：比如按显示顺序倒序赋值z-index: 5、4、3…
perspective 必须加在父容器，不是卡片本身
很多人把 perspective: 1000px 写在 .card 上，结果翻转像纸片抽动，没纵深弧线——因为 perspective 定义的是“你站在哪看这个 3D 场景”，它必须作用于包含所有卡片的外层容器（比如 .cards-list）。
- 错误写法：
.card { perspective: 1000px; }→ 无效 - 正确写法：
.cards-list { perspective: 1000px; transform-style: preserve-3d; } - 值太小（如
200px）会导致畸变夸张；太大（如5000px）接近平面旋转；800px–1200px是稳妥范围
rotateY + translateZ 组合才有立体感
纯 translateX 滑动是平面切换；加 rotateY(12deg) 和 translateZ(30px) 后，卡片才像真实卡片一样绕 Y 轴旋转+前移。
立即学习“前端免费学习笔记（深入）”；
- 背面元素必须初始化
transform: rotateY(180deg)，否则翻转后文字镜像 - 正反面都要加
backface-visibility: hidden，否则翻转中途双面闪烁 - 过渡必须写在卡片容器上：
.card { transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }，别只写在正面或背面
移动端 hover 不生效，必须补 touch 逻辑
iOS Safari 和 Android Chrome 在非可点击元素上默认不触发 :hover，卡片在手机上点不动是常态。
- 给容器加
touch-action: manipulation，减少点击延迟 - 用 JS 监听
touchstart或click，通过element.classList.toggle('is-flipped')切换状态 - 避免用
setAttribute('style', ...)动态改transform，容易覆盖 CSS 过渡声明
最容易被忽略的是祖先元素：只要 .cards-list 的任意父级有 overflow: hidden 或 transform: translateZ(0)，就会截断 3D 渲染层——检查 computed styles 里的 transform 和 overflow 层级比调样式还重要。
