触屏卡片翻转不可靠因:hover在移动端不生效，推荐:focus-within+tabindex纯css方案，或js控制class实现稳定翻转。
卡片翻转在触屏上不触发？因为 :hover 在移动端根本不可靠
绝大多数 CSS 翻转效果依赖 :hover，但 iOS 和 Android 浏览器（尤其 Safari）对 :hover 的支持极其保守：要么完全不触发，要么只在「伪悬停」（比如点击后短暂保留）时生效。这不是 bug，是规范行为——触屏没有“悬停”这个状态。
- 别指望
.card:hover .card__back在手机上稳定工作 - 即使加了
touch-action: manipulation也无济于事 - Safari 甚至会把
:hover延迟到点击后的 300ms 再应用，造成明显卡顿或错位
用 :focus-within + tabindex 模拟可点击翻转
这是目前最轻量、无需 JS、兼容 iOS 13+/Android Chrome 84+ 的纯 CSS 方案：把翻转逻辑绑定到「获得焦点」而非「悬停」，再让卡片容器能被聚焦。
- 给卡片外层容器加
tabindex="0"，使其可获得焦点 - 用
:focus-within选中其子元素（如背面），触发 transform - 确保卡片有
outline: none（否则点击时出现难看的焦点框）
.card {
perspective: 1500px;
cursor: pointer;
}
.card:focus-within .card__back {
transform: rotateY(0);
}
.card__front,
.card__back {
backface-visibility: hidden;
transition: transform 0.4s ease;
}
.card__back {
transform: rotateY(-180deg);
}
为什么不用 :active？它只在按下的瞬间生效
:active 确实能在触屏点击时触发，但它生命周期极短——手指一抬就失效，无法维持翻转后的背面状态。用户点一下看到背面，松手立刻切回正面，体验断裂。
-
:active适合做按压反馈（比如按钮变色），不适合状态切换 - 若强行用
:active+transition-delay延长，会因浏览器渲染时机不可控导致翻转卡顿或跳变 - 安卓部分 WebView 对
:active的触发延迟比 iOS 更严重，兼容性更差
真要彻底解耦交互逻辑？JS 控制 class 是唯一稳解
当需要精确控制翻转方向（比如双击翻回）、配合动画库、或支持旧版 Safari（iOS 12 及以下）时，CSS 方案必然失效。此时必须用 JS 切换 class，但要注意避免重排和过度监听。
立即学习“前端免费学习笔记（深入）”；
- 只监听
click，不要监听touchstart—— 它会干扰滚动，且在某些安卓机型上误触发 - 用
classList.toggle('is-flipped')，而非直接操作style.transform - 为防止快速连点导致状态错乱，加一个
setTimeout锁定翻转间隔（比如 300ms）
复杂点在于：翻转动画本身依赖 transform-style: preserve-3d 和正确的 transform-origin，一旦父容器尺寸动态变化（比如响应式缩放），perspective 值没同步调整，背面就会偏移或裁剪——这点很容易被忽略，调试时得盯着 DevTools 的 3D 视图看。
