卡片翻转无动画需检查transform-style和perspective：父容器设preserve-3d和perspective，正反面均加backface-visibility:hidden，触控设备需JS切换类名，文字模糊可加translateZ(0)或will-change。

卡片翻转没动画？检查 transform-style 和 perspective

卡片翻转卡在“平移”或直接闪现，大概率是 3D 渲染上下文没建立起来。CSS 翻转本质是绕 Y 轴旋转，但浏览器默认把子元素压平到同一平面，transform 再怎么写也出不来立体感。

必须在父容器（通常是卡片容器）上加：
transform-style: preserve-3d —— 告诉浏览器：别拍扁我儿子们；
perspective: 1000px（或类似值）—— 给 3D 效果一个“观察距离”，太小会夸张变形，太大又像没效果。

• perspective 推荐写在父容器上，而不是 transform 里（后者只影响单个元素）
• 别用 perspective: 0 或负值，会触发渲染异常甚至空白
• 移动端 Safari 对 preserve-3d 支持不稳定，如果翻转后背面消失，试试加 backface-visibility: hidden 到正反两面

backface-visibility: hidden 不生效？确认它作用在翻转的“面”上

这个属性不是写在卡片容器上就完事的。它得分别加在正面和反面两个子元素上，否则翻转到 180° 时，背面内容仍可能透出或闪烁。

典型结构是：.card > .front 和 .card > .back，两者都需声明：
backface-visibility: hidden

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 漏掉任意一面，iOS Safari 下极易出现“双面同时显示”或“撕裂感”
• 如果用了 position: absolute 叠放正反面，确保它们有相同宽高和 z-index 关系，否则 backface-visibility 会被忽略
• 不要把它和 visibility: hidden 混用——后者会彻底移除渲染，破坏翻转流程

hover 触发翻转在触摸设备失效？别只依赖 :hover

纯 .card:hover .card-inner { transform: rotateY(180deg) } 在手机上基本不工作，因为没有 hover 状态。得补交互逻辑，不能只靠 CSS。

• 给卡片加 tabindex="0"，再用 :focus 作为备用触发（键盘用户也受益）
• 更可靠的做法：用 JS 监听 click 或 touchstart，切换一个类名如 .is-flipped，CSS 用 .card.is-flipped .card-inner 控制状态
• 避免在 touchstart 里直接 preventDefault()，否则会干扰滚动——改用 { passive: true } 选项监听

翻转后文字模糊或锯齿？优先调 translateZ(0) 或 will-change

部分 Chrome 和旧版 Edge 在 GPU 加速不充分时，旋转后的文字边缘会发虚。这不是 bug，是亚像素渲染妥协的结果。

立即学习“前端免费学习笔记（深入）”；

简单有效的缓解方式：
给翻转的元素（比如 .card-inner）加：
transform: translateZ(0)（强制启用硬件加速）
或更精准的：
will-change: transform

• translateZ(0) 兼容性好，但别滥用——每个都加会拖慢渲染
• will-change 效果更干净，但仅在翻转前一刻设置才合理（比如 JS 中加类时同步设），静态写死可能引发内存浪费
• 别指望 backface-visibility 或 perspective 自带抗锯齿，它们不管这事

实际项目里最常被忽略的，是把翻转逻辑耦合进业务状态（比如“已选中”“已展开”）时，忘了同步控制 aria-hidden 和焦点管理——视觉翻了，屏幕阅读器却还停在旧面。