加了 transform: rotateY(180deg) 卡片没翻转，核心原因是缺少父容器的 perspective 和 transform-style: preserve-3d，且卡片需设 backface-visibility: hidden。
为什么加了 transform: rotateY(180deg) 卡片却没翻转？
核心问题通常是缺了 perspective——它不是加在要翻转的卡片上，而是加在它的父容器上。没有这个“观察距离”，rotateY 就只是平面旋转，浏览器不会启用 3D 渲染管线。
常见错误写法：.card { transform: perspective(1000px) rotateY(180deg); } ❌
这无效，因为 perspective 是一个**渲染上下文属性**，必须作用于父级，让子元素继承 3D 空间。
-
perspective值建议在600px～1200px之间：太小（如100px）会夸张变形；太大（如5000px）接近平面，翻转感弱 - 父容器需设
transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 - 卡片本身要设
backface-visibility: hidden，否则翻转后背面内容可能闪烁或透出
如何用 hover 触发平滑翻转？关键 CSS 属性组合
只靠 transition 不够，必须明确指定过渡的变换属性，否则所有 transform 变化都会被过渡，导致意外动画（比如缩放、位移也被动效化）。
- 给卡片加
transition: transform 0.4s ease—— 注意是transform，不是all - hover 状态下只改
transform: rotateY(180deg)，不叠加其他变换 - 前后两面（
.front/.back）都需设position: absolute+top: 0; left: 0; width: 100%; height: 100%，并共用同一 z 轴基准 - 背面默认加
transform: rotateY(180deg)，这样初始状态正面朝前，背面朝后，翻转时才自然切换
移动端点击翻转失效？别忘了 touch 兼容处理
CSS :hover 在多数触摸设备上不触发（尤其 iOS Safari），单纯依赖 hover 会导致点击无响应。
- 加一个空的
:active规则可临时激活 hover 状态（兼容老 iOS）：.card:active { transform: rotateY(180deg); } - 更可靠的做法是用 JS 切换 class：
card.classList.toggle('is-flipped')，然后用.card.is-flipped { transform: rotateY(180deg); } - 务必给卡片加
cursor: pointer和-webkit-tap-highlight-color: transparent，避免点击灰块干扰体验
翻转后文字模糊、边缘锯齿？这是 3D 渲染精度问题
Chrome 和 Safari 在某些 GPU 下对 3D 变换中的文本渲染支持不稳定，尤其当卡片有 border-radius 或阴影时。
- 给卡片加
transform: translateZ(0)或will-change: transform强制硬件加速（但慎用will-change，仅用于频繁动画元素） - 避免在翻转元素上直接设
font-smoothing: antialiased，它和 3D 渲染冲突；改用-webkit-font-smoothing: subpixel-antialiased - 如果用了
box-shadow，确保它在翻转前后都存在（不要只在 hover 里加），否则阴影会跳变甚至消失
真正卡住的地方往往不是 rotateY 写错了，而是 perspective 没落在对的父层，或者 backface-visibility 被漏掉——这两个点漏一个，整个 3D 效果就退化成 2D 旋转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
