perspective必须加在.card的父容器（如.card-container）上，而非.card本身；漏掉transform-style:preserve-3d或backface-visibility:hidden会导致翻转塌陷、背面透底、Safari全黑。
直接说结论：perspective 必须加在 .card 的父容器（如 .card-container）上，而不是 .card 本身；漏掉 transform-style: preserve-3d 或 backface-visibility: hidden，翻转一半就会塌陷、背面透底、Safari 全黑。
perspective 为什么不能写在 .card 上
perspective 定义的是“观察者到 Z=0 平面的距离”，它为子元素创建共享的 3D 渲染上下文。写在 .card 上，等于让每张卡片各自拥有一个独立透视原点，悬停时旋转轴不一致，视觉上会抖动、错位、边缘拉伸变形。
- 正确写法：
.card-container { perspective: 1000px; }（推荐值范围：600px–1200px） - 错误写法：
.card { perspective: 1000px; }——浏览器忽略该声明，退化为平面旋转 - 值太小（如 300px）会导致翻转中明显畸变；太大（如 3000px）则几乎看不出深度，像幻灯片切换
- 别用
transform: perspective(1000px)，这是无效语法；perspective是独立 CSS 属性
transform-style: preserve-3d 必须设在 .card 上
这个属性的作用是告诉浏览器：“别把 .card-front 和 .card-back 压平到同一个 Z=0 平面”。它只对直系子元素生效，且无法被祖先继承。
- ✅ 正确：
.card { transform-style: preserve-3d; }（.card直接包裹正反两面） - ❌ 错误：
.card-container { transform-style: preserve-3d; }——.card自身没开启 3D 上下文，子元素仍被拍平 -
.card不能有overflow: hidden，否则会裁剪翻转到 90° 时伸出的侧面 - 旧版 Safari（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d
backface-visibility: hidden 必须分别加在正反两面上
不加这句，翻转到 90° 左右时，正面和背面会同时渲染，文字镜像重叠、颜色混叠，Safari 下甚至全黑或闪烁。这不是 bug，是浏览器默认绘制背面纹理的行为。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
.card-front和.card-back上，不是.card或容器 - 两面都要设：
.card-front, .card-back { backface-visibility: hidden; } - 旧版 Safari 需补
-webkit-backface-visibility: hidden - 背面元素初始必须显式旋转：
.card-back { transform: rotateY(180deg); }，否则翻转后内容方向反了
移动端点击翻转失效？别依赖 :hover
iOS Safari 对 :hover 的支持是“伪悬停”：点一下延迟 300ms 才触发，松手立刻回弹。纯 CSS 悬停在触屏设备上基本不可靠。
- ✅ 可行解：
:focus-within + tabindex="0"，兼容 iOS 13+/Chrome 84+，无需 JS - ❌ 别用
:active——只在按下的瞬间生效，体验断裂 - 真要稳定控制（如双击翻回、手势、旧版兼容），必须用 JS 切换 class：
element.classList.toggle('is-flipped') - 确保
.card有cursor: pointer和touch-action: manipulation，避免滚动冲突
最常被忽略的其实是 DOM 层级干扰：只要 .card 的任意祖先元素设置了 overflow: hidden 或任何 transform（哪怕只是 translateZ(0)），都可能截断 3D 渲染层，导致翻转卡在半途或背面消失——得一层层检查父级样式。
