CSS如何制作卡片翻开呈现另一面的翻牌动画

最小可行结构需父容器设 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，是浏览器默认渲染背面纹理的行为。 RedClaw 百度推出的手机端万能AI Agent助手