移动端卡片翻转必须用JS切换class实现，因iOS Safari等浏览器不触发:hover；需监听click或touchstart事件，设置perspective、preserve-3d、translateZ及backface-visibility等CSS属性确保3D渲染稳定。
移动端卡片翻转必须用 JS 切换 class，不能只靠 :hover
纯 :hover 在 iOS Safari 和多数安卓浏览器里基本不触发，尤其在非“桌面模式”的 WebView 或 PWA 中。用户点一下，什么反应都没有，不是代码写错了，是浏览器根本没生成 hover 状态。
正确做法是监听 click 或 touchstart（注意加 { passive: true } 避免阻断滚动），然后切换一个类名：
.card { perspective: 800px; }
.card-inner { transform-style: preserve-3d; transition: transform 0.4s ease; }
.card.is-flipped .card-inner { transform: rotateY(180deg); }
- 给卡片加
tabindex="0"，兼顾键盘焦点用户 - 避免在
touchstart里调preventDefault()，否则页面可能无法滚动 - 不要用
display: none控制背面显隐——它会中断 3D 渲染流，导致翻转卡顿或消失
transform-style: preserve-3d 必须设在翻转容器上，不是最外层 wrapper
常见错误是把 transform-style: preserve-3d 写在 .card 上，但实际它得作用在直接包裹 .front 和 .back 的那个元素上，比如 .card-inner。如果结构是 .card > .card-inner > .front, .back，那 preserve-3d 就得在 .card-inner 上。
-
perspective推荐设在.card这一级（父容器），值取600px～1000px之间 - 别把
perspective写进transform属性里（如transform: perspective(800px) rotateY(0)），那样只影响单个元素，子元素不会继承 3D 上下文 - iOS Safari 对
preserve-3d支持较弱，若背面消失，立刻补上backface-visibility: hidden到正反两面
rotateY(180deg) 前后两面的初始 transform 必须对称且带 translateZ
只写 .front { transform: rotateY(0) } 和 .back { transform: rotateY(180deg) } 是不够的。它们默认都在 Z=0 平面，会重叠、错位甚至闪烁。
立即学习“前端免费学习笔记（深入）”；
必须给两者都加 translateZ，方向相同、数值相等（比如 50px），靠旋转区分前后：
.front { transform: rotateY(0deg) translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
- 别用
.front { translateZ(-50px) }+.back { translateZ(50px) }，这会让两个面在 3D 空间里“错开”，翻转时视觉偏移 -
translateZ的值决定“卡片厚度”，太小（如10px）看起来像纸片，太大（如200px）边缘畸变明显 - 动画过程中只改
rotateY，其他transform值保持不变，否则容易触发渲染异常
文字模糊、图标发虚？加 will-change 或 translateZ(0) 强制 GPU 加速
翻转后文字边缘锯齿、SVG 图标变糊，本质是浏览器降级到了 CPU 渲染。Chrome 和 Safari 在检测到亚像素偏移或未对齐时会自动关闭硬件加速。
- 给翻转主体（如
.card-inner）加will-change: transform，但仅限动画元素，别滥用在整页容器上 - 更轻量的方案是加
transform: translateZ(0)，它不改变布局，但能触发 GPU 合成层 - 确保字体大小是整数（如
16px而非15.8px），避免缩放导致抗锯齿失效
真正难调的是 iOS Safari 下的组合行为：preserve-3d + touch 事件 + 动画过渡，三者稍有错配就闪退或白屏。建议先在真机上验证基础结构是否能稳定翻转，再叠加交互逻辑。
