最常见的原因是父容器未设 perspective 或卡片未开启 3D 渲染上下文；需父容器设 perspective，卡片加 transform-style: preserve-3d，正反面设 backface-visibility: hidden 并初始化 rotateY 值。
transform: rotateY() 不生效，卡片没动
最常见的原因是父容器没设 perspective，或者卡片本身没开启 3D 渲染上下文。css 的 rotateY() 是 3D 变换，但浏览器默认在 2D 平面渲染，不加透视就只是“扁平旋转”，视觉上几乎看不出翻转感。
- 必须给卡片的**父容器**设置
perspective（比如perspective: 1000px），不能只加在卡片自身上 - 卡片自身要加
transform-style: preserve-3d，否则子元素（如正面/背面）会被压平，失去 Z 轴空间关系 - 确保卡片有明确宽高，且
backface-visibility: hidden加在正反两面元素上，避免翻转时看到背面内容透出
transition 没反应，hover 一下没动画
transition 对 transform 生效的前提是：触发前后 transform 的值类型一致、且不是 none → rotateY(180deg) 这种跳跃式写法容易失效。浏览器无法插值 none 和具体变换矩阵。
- 正反面都初始化为
transform: rotateY(0deg)和rotateY(180deg)，不要用none -
transition写在卡片容器上，而不是 hover 状态里（否则首次 hover 无过渡） - 检查是否被其他 CSS 覆盖，比如
!important或更高优先级选择器重置了transform - 避免同时过渡多个属性（如
transition: all 0.4s），应明确写成transition: transform 0.4s ease
翻转后背面内容显示错位或镜像
这是背面元素未正确绕 Y 轴翻转导致的。单纯给背面加 rotateY(180deg) 不够——它还在原位置，只是“转过去了”，需要再沿 Y 轴平移半个宽度，把它“拉”到正面位置。
- 背面元素需额外加
transform: rotateY(180deg) translateZ(1px)（1px防止 Z=0 时像素对齐问题） - 更稳妥做法：正反面都设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，共用同一坐标系 - 如果用了
flex或grid布局，可能干扰absolute定位，建议卡片容器用position: relative显式建立包含块
.card { width: 200px; height: 260px; perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s ease; transform-style: preserve-3d; } .card:hover .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .card-front { transform: rotateY(0deg); } .card-back { transform: rotateY(180deg); } 翻转效果真正卡住的地方，往往不在 rotateY 本身，而在于 perspective 的作用域、transform-style 的继承、以及背面元素是否真正“就位”。少一个 preserve-3d 或漏写 backface-visibility，都可能让整个动画看起来像没动。