根本原因是纯 :hover 在移动端和部分桌面浏览器（尤其是 safari）中不触发或立即失效，必须用 js 切换 class 控制翻转状态；.card-front 和 .card-back 都需设 backface-visibility: hidden；transform-style: preserve-3d 必须加在 .card 上；perspective 必须设在外层容器如 .card-container。
为什么
根本原因是纯 :hover 在移动端和部分桌面浏览器（尤其是 Safari）中不触发或立即失效。按钮点击本身不会维持伪类状态，.card:hover 在手指离开或鼠标移开瞬间就解除，导致翻转动画没走完就倒退。
必须用 JS 切换 class 控制状态，而不是依赖 hover。哪怕只是简单点击，也要靠 class 的增删来锁定翻转态。
-
button绑定click事件，调用element.classList.toggle('is-flipped') -
.card.is-flipped覆盖默认transform值，比如设为rotateY(180deg) - 不要直接操作
style.transform，避免内联样式优先级干扰 CSS 动画 - 如果卡片需支持“点一次翻、再点一次回”，
toggle最稳妥；若只需单向翻转，用add/remove
卡片结构里哪些元素必须设backface-visibility: hidden
它必须分别加在正面和背面两个内容层上，不是加在包裹它们的 .card 上。
常见错误是只写在 .card，结果翻转到 90° 左右时两面同时可见、文字镜像、内容重叠——因为该属性只对「自身参与 3D 变换」的元素生效，而 .card-front 和 .card-back 才是真正承载内容并需要隐藏背面的节点。
-
.card-front和.card-back都要加backface-visibility: hidden - 旧版 Safari（15.4 之前）还需补
-webkit-backface-visibility: hidden -
.card上不能加这个属性——它不渲染内容，加了无效 - 漏掉任意一面，翻转过程就会透出另一面的反向内容
transform-style: preserve-3d 加在哪一层才生效
必须加在直接包裹前后两面的容器上，通常是 .card，而不是外层 .card-container 或内层 .card-front。
不加这句，所有子元素的 Z 轴位移会被浏览器“拍平”成 2D，rotateY(180deg) 就只是左右镜像翻转，背面永远不可见，看起来像卡片突然消失又出现。
- 只加在
.card这一层，它是.card-front和.card-back的直接父级 -
.card-container只负责perspective，不参与 3D 渲染上下文建立 - Safari 旧版本需补
-webkit-transform-style: preserve-3d - 如果
.card有overflow: hidden，会裁掉 Z 轴延伸部分，导致翻转半截消失
移动端点击翻转卡顿或不动的兼容处理
Safari 对嵌套较深的 preserve-3d 支持不稳定，尤其当 .card 在 flex 容器里时，容易退化为 2D 渲染。现象包括：只转一半、背面完全空白、位置偏移。
不是删功能，而是加兜底补丁。
- 所有
transform属性同时写标准版和-webkit-前缀：-webkit-transform: rotateY(180deg); transform: rotateY(180deg); -
.card加-webkit-perspective: 1000px（即使外层已有perspective） - 若仍异常，尝试把
.card的display改为inline-block（Safari 对 flex 子项的 3D 支持更差） - 别加
will-change: transform——旧 Safari 会因此引发重绘 bug
最易被忽略的是 perspective 的位置：它必须设在外层容器（如 .card-container），而非 .card 自身。写错这一层，整个 3D 效果就只剩平面旋转，无论怎么调参数都看不出立体感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
