要实现顺滑3D翻转，需在.card上设transform-style: preserve-3d、正反面均加backface-visibility: hidden、transition写在默认状态、perspective设于父容器，并确保正反面同级绝对定位对齐。
直接写 :hover { transform: rotateY(180deg); } 不会得到顺滑的 3D 翻转，只会看到平面旋转、背面空白、移出时“啪”一下弹回——问题不在 hover 本身，而在 3D 渲染层没开、过渡没挂对位置、正反面没对齐。
必须给卡片容器加 transform-style: preserve-3d
浏览器默认把所有子元素拍平在 Z=0 平面。哪怕你给 .card-back 写了 transform: rotateY(180deg)，它也会被父级“压扁”，翻转失效。
-
.card（正反面的直接父容器）必须设transform-style: preserve-3d - 别只加在 .card-back 上，也别加在最外层 .card-container 上（除非它也是翻转主体）
- 如果用了嵌套结构（比如 .card > .card-inner > .front/.back），
preserve-3d要加在 .card-inner 上
backface-visibility: hidden 得正反两面都加
不加这个，翻转到 90° 左右时正反面会同时显示，出现闪烁或文字透底；只加在背面，正面在翻转后会从背面“漏出来”。
- 必须分别写在
.card-front和.card-back上 - 不能只靠
rotateY(180deg)隐藏背面——那是错觉，实际仍参与渲染 - 即使你用
opacity: 0或visibility: hidden，也不替代backface-visibility的 3D 剔除作用
transition 必须写在默认状态，不是 :hover 里
把 transition: transform 0.4s 只写在 .card:hover 中，会导致鼠标移入有动画、移出瞬间跳回——因为移出时样式恢复，但 transition 规则已失效。
- 写在
.card默认样式里：transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.4, 1); - 避免同时过渡
opacity和transform：Safari 和部分安卓 WebView 会掉帧 - 首次翻转卡顿？在默认状态加
transform: translateZ(0)或will-change: transform提前触发硬件加速
背面点击无效？检查 transform-origin 和层级关系
翻转后按钮点不了，大概率不是 JS 绑定问题，而是 3D 坐标或层叠逻辑错了。
- 确保
.card-front和.card-back是同级、position: absolute、top: 0; left: 0;对齐——用 margin/flex 推挤会导致错位 -
transform-origin: center是默认值，但若卡片宽高不一或响应式缩放，建议显式写死：transform-origin: 50% 50% - 背面 z 轴为负，但
z-index不起作用；如需微调可加transform: translateZ(1px)到 .card-back - 检查有没有父级意外设置了
pointer-events: none，尤其某些 CSS 框架或重置样式里藏得深
真正容易被忽略的是：perspective 必须写在翻转容器的父级（比如 .card-container），而不是 .card 自身；且 backface-visibility: hidden 是强制项，不是“优化建议”。少一个，翻转就不是 3D，只是二维旋转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
