根本原因是纯 :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 才是真正承载内容并需要隐藏背面的节点。

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• .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 效果就只剩平面旋转，无论怎么调参数都看不出立体感。