纯CSS实现卡片翻转需用transform:rotateY(180deg)配合transform-style:preserve-3d，前后两面同属一个3D上下文，设backface-visibility:hidden防背面显示，移动端须用JS切换class或@media(hover:hover)适配。
用 CSS 3D 变换实现卡片翻转，不是靠 JS 切换 class
纯 CSS 实现卡片翻转效果的核心是 transform: rotateY(180deg) 配合 transform-style: preserve-3d，而不是靠 JS 切换前后两个 div 的显隐。后者看似简单，但无法触发硬件加速、动画卡顿、且丢失真实 3D 深度感。
关键点在于：前后两面必须是同一个父容器的子元素，共享同一个 3D 空间上下文。
-
container设置perspective（比如1000px），决定 3D 透视强度 -
card设置transform-style: preserve-3d，让子元素保留在 3D 空间中 -
front和back均设置position: absolute+backface-visibility: hidden（防止翻转时看到背面内容反向投影） - 翻转动作由
card:hover或.card.is-flipped触发rotateY(180deg)
backface-visibility: hidden 不加会出什么问题
不加 backface-visibility: hidden 时，翻转到 90°–270° 区间，front 和 back 会同时显示，甚至出现重叠错位、文字镜像、闪烁等现象——尤其在 Safari 和旧版 Chrome 中非常明显。
这不是 bug，而是浏览器按标准渲染背面像素的结果。它本意是让开发者控制是否允许“看到背面”。卡片场景下，你永远不希望用户看到翻转过程中的背面文字倒着贴在正面。
立即学习“前端免费学习笔记（深入）”；
- 必须为
front和back两个面都设置backface-visibility: hidden - 仅对翻转容器（
card）设无效，该属性只对直接子元素生效 - 部分安卓 WebView（如微信内置）对这个属性支持不稳定，可加
-webkit-backface-visibility: hidden兜底
hover 触发 vs click 触发：别用 :active 代替 :hover
移动端没有 hover，所以单纯依赖 :hover 的翻转在手机上基本不可用；但直接换成 :active 也不行——它只在触摸/点击瞬间生效，松手就回弹，无法“保持翻转状态”。
真正可行的方案只有两种：
- 用 JS 切换一个 class（如
is-flipped），再用 CSS 控制该 class 下的transform。适合需要点击切换、支持多次翻转的场景 - 用
@media (hover: hover)区分设备，PC 用:hover，移动端用 JS 绑定click/touchend。避免在无 hover 能力的设备上写死:hover - 千万别用
:focus-within模拟——它依赖焦点管理，表单外元素默认无法获得焦点，还得加tabindex，体验和语义都变差
性能敏感点：transform 和 will-change 的取舍
翻转动画本身走的是 GPU 合成层，只要用 transform + transition，基本不会掉帧。但有两个容易被忽略的坑：
- 不要给
card设will-change: transform—— 它会提前创建合成层，导致内存占用上升，多卡片时明显卡顿；现代浏览器已能自动优化，手动加反而干扰 - 如果卡片内有图片或字体图标，确保它们加载完成后再触发翻转动画（否则可能看到空白或重排）；可用
img.onload或fontFace.load()后再添加翻转 class - 避免在
front/back内使用box-shadow或filter: drop-shadow()—— 这些会强制回退到 CPU 渲染，翻转一卡一卡的
最麻烦的其实是移动端 touch 事件穿透和点击延迟。如果卡片里有链接或按钮，翻转后要确保交互区域仍准确响应，不能因为 transform 导致 hit-test 错位——这时候得检查 transform-origin 是否居中，以及是否意外设置了 pointer-events: none。
