最小可行结构需父容器设 perspective，卡片容器设 transform-style: preserve-3d，前后两面均设 backface-visibility: hidden 且初始 rotatey 分别为 0deg 和 180deg。
用 transform: rotateY() 实现卡片翻转的最小可行结构
翻牌动画本质是让前后两个面共享同一个容器，通过绕 Y 轴旋转 180°，把背面“转”到前面。关键不是加动画，而是让两面始终在同一个 3D 空间里对齐——否则会错位、闪动或根本看不到背面。
常见错误：直接给两个 div 分别加 animation，结果背面飞出屏幕外，或者翻到一半就消失。这是因为没启用 3D 渲染上下文，也没设置正确的 transform-style 和 perspective。
- 父容器必须设
perspective（比如perspective: 1000px），值越小翻转越“夸张”，太小（如100px）会导致背面严重畸变 - 卡片容器（包裹前后两面的
div）要设transform-style: preserve-3d，否则子元素会被压平成 2D - 正面默认
transform: rotateY(0deg)，背面初始就要设transform: rotateY(180deg)，而不是靠动画从 0 动到 180 —— 否则初始态背面就不可见
触发翻转：用 :hover 还是 JS 控制 class？
纯 CSS :hover 最简单，但只适用于鼠标悬停场景；真实项目里往往需要点击切换、配合数据状态、或防止移动端误触，这时候必须用 JS 切换 class。
容易踩的坑：用 display: none 隐藏背面——这会让 3D 变换失效，因为元素被彻底移出渲染流。要用 visibility: hidden 或 opacity: 0 + pointer-events: none 配合 transform 控制显隐。
-
:hover方案适合文档示例或纯展示页，写法简洁：.card:hover .card-inner { transform: rotateY(180deg); } - JS 方案更可控，推荐监听点击后添加
is-flipped类：cardElement.classList.toggle('is-flipped')，然后在 CSS 里写.card.is-flipped .card-inner { transform: rotateY(180deg); } - 移动端注意：iOS Safari 对
:hover响应延迟或不触发，必须用click或touchstart事件
backface-visibility: hidden 不是可选项，是必填项
不加这句，翻转过程中你会看到背面内容“镜像翻转”地透出来，尤其在 Chrome 和 Safari 下非常明显。这不是 bug，是浏览器默认渲染背面纹理的行为。
它只影响视觉呈现，不影响变换逻辑。加了之后，当元素旋转角度使背面朝向镜头时，那一面就完全不可见——这才是你想要的“只看到当前面”的效果。
- 必须加在**前后两个面**上，不能只加在背面：
.card-front, .card-back { backface-visibility: hidden; } - 值只有
visible和hidden两种，没有中间态，也不支持过渡 - 如果翻转后某一面文字反向（镜像），说明你漏写了这一句，或者写在了父容器上而非具体面上
性能和兼容性：哪些地方真会影响体验
翻牌动画本身开销不大，但几个细节会拖慢帧率或导致闪屏：强制重排、未开启硬件加速、低版本 Android 浏览器的 3D 支持缺陷。
Android 4.4 及更早版本对 preserve-3d 支持极差，很多机型直接忽略，导致翻转变成“淡入淡出”。iOS 9+ 和 Chrome 60+ 基本无压力。
- 给翻转容器加
will-change: transform能提前提示浏览器启用 GPU 加速，但别滥用——只加在真正会动的元素上 - 避免在翻转动画中同时修改
width、height或margin，这些会触发 layout，卡顿明显 - 如果需支持老 Android，降级方案不是改动画，而是改交互逻辑：用
opacity切换 +z-index层叠，放弃 3D 效果
翻牌最难的从来不是写几行 transform，而是让前后两面在 3D 空间里严丝合缝地咬合。稍微偏移几像素，动画一跑就露馅——所以初始化时务必用 transform: translateZ(0) 或固定宽高对齐，别依赖 margin 居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
