backface-visibility: hidden 必须设在 .card 容器上而非子面，因其仅对执行 3D 变换的元素生效；.card 还需设 transform-style: preserve-3d、明确宽高，且避免 overflow: hidden 和伪 3D 干扰。
翻转卡片效果的关键不在 HTML 结构，而在于 backface-visibility 是否被正确应用在翻转容器上——它必须设在触发 3D 变换的父元素（如 .card），而不是子面（.card-front 或 .card-back）上，否则背面内容在翻转过程中会“透出”或闪烁。
为什么 backface-visibility: hidden 必须加在卡片容器上
很多人把 backface-visibility: hidden 写在 .card-front 或 .card-back 上，结果翻转时看到两个面重叠、文字反向显示，甚至 Safari 下直接失效。这是因为该属性只对「自身参与 3D 变换的元素」生效，而卡片翻转动作实际发生在 .card（通过 transform: rotateY(180deg)），所以隐藏背面逻辑也得由它控制。
-
.card需设transform-style: preserve-3d+backface-visibility: hidden -
.card-front和.card-back本身不翻转，只是定位在.card的前后空间中 - 若遗漏
transform-style: preserve-3d，子元素的 3D 位置会被压平，背面永远不可见
HTML 结构只需满足层级与语义，无需额外 class 或 data 属性
纯语义化结构完全够用，不需要 JS 驱动 class 切换也能实现基础翻转（比如 hover 触发）。重点是保证 .card 包裹两个面，且两面使用绝对定位撑满父容器。
<div class="card"> <div class="card-front">正面内容</div> <div class="card-back">背面内容</div> </div>
-
.card应设position: relative，作为定位上下文 -
.card-front和.card-back均为position: absolute; top: 0; left: 0; width: 100%; height: 100% -
.card-back需额外加transform: rotateY(180deg)，让它初始就“背朝外”
hover 翻转时，transition 要写在 .card 上，而非子元素
如果把 transition: transform 0.6s 写在 .card-front 上，只有正面动；写在 .card 上，整个 3D 容器才平滑旋转。同时注意：Safari 对 transform 过渡的硬件加速更敏感，建议加上 transform: translateZ(0) 或 will-change: transform 防卡顿。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐过渡写法：
.card { transition: transform 0.6s cubic-bezier(.25,.75,.5,1); } - hover 触发：
.card:hover { transform: rotateY(180deg); } - 移动端需补
@media (hover: hover)判断，避免误触；真机测试务必加touch-action: manipulation
移动端真机翻转失效？检查三个硬性前提
iOS Safari 和部分安卓 WebView 在翻转卡片时白屏或静止，往往不是 CSS 写错，而是缺了这三项之一：
-
.card必须有明确的width和height（百分比无效，需 px/em/vw） - 父容器不能有
overflow: hidden（会裁掉 3D 空间中伸出的部分） - 整个翻转链路上不能存在
transform: scale(1)或opacity: 0.99类似“伪 3D”操作，它们会破坏层叠上下文
最稳妥的兜底方式：给 .card 加 -webkit-transform-style: preserve-3d 和 -webkit-backface-visibility: hidden，哪怕现代浏览器已不需要前缀，iOS 15+ 仍偶发依赖它们。
