如何实现移动端卡片翻转的3D效果_基于CSS的perspective与backface-visibility

移动端卡片翻转3D效果失效主因是未建立3D渲染上下文，需同时满足三点：perspective设在翻转容器上、transform-style: preserve-3d设在直接包裹正反面的元素上、front和back均加backface-visibility: hidden且定位绝对。

移动端卡片翻转的 3D 效果在 iOS Safari 和多数安卓 WebView 中无法靠 :hover 触发，必须用 JS 切换 class；否则点一下毫无反应——不是代码错了，是浏览器压根不生成 hover 状态。

为什么 rotateY(180deg) 没反应

主因是 3D 渲染上下文没建立起来。关键三点缺一不可：

• perspective 必须设在翻转容器（如 .card）上，值建议 600px～1000px；写在 body 或外层 wrapper 上无效
• transform-style: preserve-3d 必须设在直接包裹 .front 和 .back 的那个元素上（比如 .card-inner），不是最外层 .card
• .front 和 .back 都得加 position: absolute + top: 0; left: 0; width: 100%; height: 100%，否则翻转时错位或消失

backface-visibility: hidden 为什么必须加两次

这个属性只对**直接子元素**生效，所以 .front 和 .back 都得单独加，漏一个就会在翻转到 90° 左右时同时显示正反面，文字镜像重叠、闪烁，尤其在 Safari 和微信 WebView 中非常明显。

部分安卓 WebView 对标准属性支持弱，可补一行：-webkit-backface-visibility: hidden

立即学习“前端免费学习笔记（深入）”；

别给翻转容器（如 .card）加这个，它不起作用。

移动端必须用 JS 切换 class，不能只靠 CSS

iOS Safari 默认不触发 :hover，:active 又只在触摸瞬间生效、松手就回弹，没法保持翻转状态。

正确做法是：

• 监听 click 或 touchstart（记得加 { passive: true }，避免阻断页面滚动）
• 给卡片加 tabindex="0"，保证键盘用户也能操作
• 切换一个 class，例如 .card.is-flipped，CSS 里写 .card.is-flipped .card-inner { transform: rotateY(180deg); }
• 千万别用 display: none 控制背面显隐——它会中断 3D 渲染流，导致翻转卡顿或白屏

App 端（uni-app / 微信小程序）要特别小心

iOS App 内 WebView 对 transform-style: preserve-3d 支持极差，常见白屏、只显示正面、动画卡死。此时应放弃纯 CSS 3D，改用伪 3D 方案：

• 用 @keyframes 定义 rotateY(0deg) → rotateY(180deg)
• 配合 z-index 和 opacity 手动控制正反面显隐顺序
• perspective 仍要设在直接父容器上，且不能省略 backface-visibility: hidden

真正容易被忽略的是：所有 3D 属性都依赖层级结构的精确性——perspective、preserve-3d、translateZ、backface-visibility 各自生效的位置不同，挪错一层，整个翻转就失效。