卡片翻转失效的三大主因是定位未对齐、3d上下文未激活、背面未隐藏；需确保position绝对定位+top/left/宽高一致、perspective设于父容器、transform-style:preserve-3d设于.card、正反面均加backface-visibility:hidden。
直接写 transform: rotateY(180deg) 没反应，不是语法错，而是定位没对齐、3D上下文没激活、背面没隐藏——三者缺一，翻转就卡在原地。
为什么卡片正反面错位或抖动
根本原因是两面没真正“叠在同一位置”。position: absolute 必须配合 top: 0; left: 0; 和完全一致的宽高，否则旋转中会偏移、拉扯。
-
.card需设position: relative，作为绝对定位的参照父容器 -
.card-face（含 front/back）必须共用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 避免用
margin或transform: translate()微调位置——这会干扰rotateY的轴心计算 - 若卡片有圆角或阴影，确保正反面
border-radius和box-shadow完全一致，否则翻转到 90° 时边缘会撕裂
perspective 和 transform-style 写在哪层才生效
perspective 必须设在翻转动作的“观察者”层级，也就是 .card 的直接父容器（如 .card-container），而不是 .card 自身；transform-style: preserve-3d 则必须写在 .card 上——写错层级，Z 轴就塌了。
- 错误写法：
.card { perspective: 1000px; }→ 透视无效，子元素看不到纵深 - 正确结构：
.card-container { perspective: 800px; }+.card { transform-style: preserve-3d; transition: transform 0.6s; } - 多个卡片并列时，每个
.card都要单独设transform-style: preserve-3d，不能只靠外层继承 - 值选 600px–1200px 较稳妥；低于 300px 易畸变，高于 2000px 几乎看不出翻转深度
backface-visibility: hidden 为什么必须加两次
不是“背面才需要隐藏”，而是正反两面都得加。不加的话，翻转到 90° 左右时，背面文字会从正面“透出来”，甚至显示镜像倒字——这是浏览器默认渲染行为。
- 必须同时写：
.card-front, .card-back { backface-visibility: hidden; } - 漏掉
.card-front的那条，悬停瞬间会出现“闪白”或内容重叠 - 注意：某些旧版 Safari 要求显式加
-webkit-backface-visibility: hidden - 切勿在
:hover里动态加这个属性——它必须是初始样式，否则动画第一帧就失效
移动端点击翻转失效的兜底方案
iOS Safari 对 :hover 支持极不可靠：首次点击可能触发伪悬停，之后再点就彻底失灵。纯 CSS 方案无法稳定覆盖所有设备。
- 降级策略：用
@media (hover: hover) and (pointer: fine)包裹:hover规则，仅在鼠标环境启用 - 推荐做法：用轻量 JS 监听
click，切换.is-flippedclass，CSS 响应 class 变化而非 hover - 避免在翻转过程中改
z-index或opacity——Safari 会直接丢弃背面图层，导致翻过去只剩空白 - 调试时打开 Chrome DevTools 的 “Rendering” 面板，勾选 “3D view”，能直观看到 Z 轴是否真的立起来了
最容易被忽略的是 transform-origin 的隐式影响：没声明时默认是 50% 50%，但一旦卡片加了 padding 或内部内容撑开尺寸，实际旋转中心就会偏移——建议显式写成 transform-origin: center center 并用开发者工具实时校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
