移动端卡片翻转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 各自生效的位置不同，挪错一层，整个翻转就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
