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助手