根本原因是浏览器未开启硬件加速导致transform动画走CPU渲染，应仅在.front和.back上加backface-visibility:hidden和translateZ(0)，避免错加在.card容器上。
card翻转时页面抖动或闪烁
根本原因是浏览器没开启硬件加速，transform 动画被强制走 CPU 渲染。加 backface-visibility: hidden 和 transform: translateZ(0) 是最稳妥的解法，但别乱加在父容器上——只加在需要翻转的两个面（.front 和 .back）上。
常见错误是给整个 .card 容器加 transform: translateZ(0)，结果导致子元素翻转时坐标系错乱，反而更卡。
.front, .back { backface-visibility: hidden; transform: translateZ(0); }- 避免在
.card上写perspective同时又在子元素上重复写transform-style: preserve-3d—— 选一层设就行，推荐设在.card - Chrome 120+ 对
will-change: transform更敏感，加了可能触发意外重绘，不如老老实实用translateZ(0)
CSS 3D翻转不生效，看起来像平面切换
90% 是因为缺了 transform-style: preserve-3d，或者它被错误地写在了翻转动画的触发元素上（比如写在 hover 的 .card:hover 里），而没写在静态的父容器上。
必须保证：3D 空间由 .card 创建，两个面（.front/.back）是它的直接子元素，且 .card 自身有 perspective 值（比如 1000px）。
立即学习“前端免费学习笔记（深入）”；
.card { perspective: 1000px; transform-style: preserve-3d; }-
.card:hover .front { transform: rotateY(180deg); }和.card:hover .back { transform: rotateY(0deg); }才能形成连贯翻转 - 如果用
rotateX，记得检查父容器高度是否足够，否则背面会被裁掉
hover触发翻转在触摸设备上失效
CSS :hover 在 iOS Safari 和 Android Chrome 上默认只对可点击元素（如 <a>、<button>）生效，纯 <div> 卡片点一下没反应，再点才翻——这是浏览器把第一次点击当“模拟 hover”用了。
解决不是靠 JS 绑 click，而是用媒体查询 + :active 做降级，同时补一个空的 onclick 属性骗过移动端识别。
- 给卡片加
onclick=""（哪怕空着），iOS 就会把它当可交互元素 - 加媒体查询：
@media (hover: none) and (pointer: coarse) { .card:active .front { transform: rotateY(180deg); } } - 别用
touchstartJS 监听去切 class，会和 CSS 动画抢状态，翻一半卡住
transition-duration 不起作用或过渡生硬
问题常出在 transition 写的位置不对：你得把 transition 写在「静态状态」的元素上，而不是只写在 :hover 里。否则鼠标移入有动画，移出就啪一下回弹。
另外，transform 的过渡必须明确指定属性，写 transition: all .3s 看似省事，但会把 opacity、color 等无关变化也拖进过渡队列，反而影响性能。
-
.front, .back { transition: transform .3s ease-transform; }（注意：ease-transform不是标准值，应写cubic-bezier(.34,1.56,.64,.4)或直接用ease） - 不要写
transition: all .3s，尤其别让height或margin参与过渡 - 如果翻转后内容文字模糊，是 GPU 渲染精度问题，加
backface-visibility: hidden通常能缓解
