卡片翻转背面不显示的根源是 backface-visibility 未正确设为 hidden，必须同时应用于翻转容器（.card）和两个子面（.card__front/.card__back），配合 transform-style: preserve-3d 和 perspective 才能实现真实 3D 翻转。
卡片翻转时背面内容不显示？检查 backface-visibility 是否设为 hidden
默认情况下，CSS 3D 变换（如 rotateY）翻转到背面时，浏览器仍会渲染正面元素的背面——但它是镜像翻转的，文字反向、颜色异常，看起来像“没内容”。真正让背面“可读”且“独立控制”的关键不是加 ::after，而是确保父容器和子面都正确设置了 backface-visibility: hidden。否则，即使写了背面样式，也只会看到正面的倒影。
-
backface-visibility: hidden必须同时加在翻转容器（如.card）和两个子面（.card__front/.card__back）上，缺一不可 - 仅对触发 3D 变换的元素生效，所以
transform-style: preserve-3d要加在父容器（如.card），不能只加在子面上 - 若用
::after模拟背面，它本质是伪元素叠加层，不参与 3D 空间，无法真正“翻转”，只能做视觉欺骗——适合静态提示，不适合交互式翻转
用 ::after 做伪背面？仅适用于无交互、纯展示场景
::after 本身没有深度、不能旋转，它只是盖在原元素之上的平面图层。如果你看到“翻转背面效果”其实是靠 transform: rotateY(180deg) + opacity: 0/1 切换两个真实 DOM 子面，::after 并未参与翻转逻辑。强行用 ::after 当背面，会遇到三个硬伤：
- 无法响应鼠标事件（
pointer-events: none默认开启），点击不到背面按钮或链接 - 无法独立设置
transform-origin或perspective，视角固定、失真明显 - 动画卡顿：浏览器需频繁重绘伪元素与主内容的混合层，尤其在低配设备上掉帧明显
示例中常见错误写法：.card:hover .card__front::after { content: "背面内容"; transform: rotateY(180deg); } —— 这不会翻转，只会把伪元素扭成一条线。
真正可用的翻转结构：两个真实子元素 + 正确 3D 层级
可靠方案必须用两个兄弟元素（如 <div class="card__front"></div>
<div class="card__back"></div>），配合以下最小必要 CSS：
立即学习“前端免费学习笔记（深入）”；
`.card {
perspective: 1000px;
transform-style: preserve-3d;
}
.card__front, .card__back {
backface-visibility: hidden;
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
.card__front {
transform: rotateY(0deg);
}
.card__back {
transform: rotateY(180deg);
}
.card:hover .card__front {
transform: rotateY(-180deg);
}
.card:hover .card__back {
transform: rotateY(0deg);
}`
注意：perspective 写在父容器上，不是 body 或 html；transform-style: preserve-3d 不写会导致子面塌陷到同一平面，翻转失效。
移动端 Safari 翻转闪烁？强制启用硬件加速并禁用缩放
iOS Safari 对 backface-visibility 的实现有历史 bug：快速悬停或触摸触发时，背面可能闪白或延迟渲染。解决方法不是加更多 will-change，而是针对性处理：
- 给
.card__front和.card__back同时加上transform: translateZ(0)（或translate3d(0,0,0)），强制 GPU 渲染 - 移除
:hover，改用touchstart+ JS 切换.is-flipped类，避免 Safari 对 hover 的误判 - 确保父容器无
overflow: hidden且未被clip-path截断，否则背面会被裁掉
这个细节常被忽略：翻转动画本身没问题，但 Safari 在 touch 事件下对 3D 层级的重绘策略更保守，必须显式触发合成层。
