悬停触发 rotateY 翻转必须用 :hover 控制 transform 并配合 transition，不能依赖自动播放的 @keyframes；需设 .card 的 transform-style: preserve-3d，正反面均加 backface-visibility: hidden，背面额外加 transform: rotateY(180deg)，transition 写在默认状态且指定属性与时间，transform-origin 应确保为 center。
悬停触发 rotateY 翻转必须用 :hover 控制 transform，不能只靠 keyframes
纯 @keyframes 定义的动画默认自动播放，无法响应鼠标交互。要实现“悬停才翻转”，核心是把 transform: rotateY(180deg) 作为 :hover 状态下的样式声明，配合 transition 实现平滑过渡——@keyframes 在这里其实不是必需的。
卡片容器需设 preserve-3d 且子元素正反面都加 backface-visibility: hidden
否则翻转后背面内容会透出、模糊或错位。常见错误是只给正面加 backface-visibility，漏掉背面，或忘记给父容器设 transform-style: preserve-3d。
-
.card容器必须有transform-style: preserve-3d -
.card__front和.card__back都要加backface-visibility: hidden - 背面元素需额外加
transform: rotateY(180deg)初始化朝向
transition 要写在默认状态，不是 :hover 里
否则首次悬停无动画，仅后续来回才有。而且必须明确指定过渡属性和时长，不能只写 transition: all .3s（可能误触其他属性）。
.card { transition: transform .4s ease; } .card:hover { transform: rotateY(180deg); }rotateY 翻转轴心默认是中心点，但有时需要调整
如果卡片看起来“偏移翻转”或边缘抖动，大概率是 transform-origin 没对齐。默认值是 50% 50%，但若卡片用了 margin、padding 或 border，视觉中心可能偏移。
立即学习“前端免费学习笔记（深入）”；
- 确保
.card没有影响盒模型的意外box-sizing变更 - 必要时显式写
transform-origin: center - 调试时可临时加
outline: 1px solid red看实际旋转中心
翻转动画真正难调的不是角度或时间，而是 3D 渲染上下文是否干净——perspective 值太小会夸张变形，太大又看不出深度；transform-style 漏写或写在子元素上就直接失效；这些细节不报错，但效果完全不对。