backface-visibility: hidden必须配合前缀和3D上下文才生效：Chrome/Safari/Opera需-webkit-，Firefox 16–49需-moz-，IE10–11及Edge 12–18需-ms-；且父容器必须设transform-style: preserve-3d，否则所有前缀均无效。
backface-visibility 在现代浏览器中基本可用，但必须加前缀才能覆盖 Chrome、Safari、旧版 Firefox 和 IE —— 单写 backface-visibility: hidden 会直接在 Safari 或旧版 Firefox 里失效。
哪些浏览器要加什么前缀？
不是“要不要加”，而是“不加就挂”：
- Chrome / Safari / Opera 15+：必须写
-webkit-backface-visibility: hidden - Firefox 16–49：需要
-moz-backface-visibility: hidden（新版已支持标准属性，但加了更稳） - IE 10–11：必须写
-ms-backface-visibility: hidden - Edge 12–18：同样需要
-ms-前缀；Edge 79+（Chromium 内核）回归 WebKit 行为，认-webkit-
所以最保险的写法永远是四行并列，顺序无关，但建议把标准属性放最后：
div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}为什么加了前缀还是在 Firefox 里显示背面？
常见现象：CSS 里写了所有前缀，transform: rotateY(180deg) 也生效了，但翻转后背面文字/图片仍可见 —— 这不是前缀问题，而是 transform-style 缺失。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
backface-visibility只对启用 3D 渲染上下文的元素生效 - 父容器没设
transform-style: preserve-3d，子元素的 3D 变换会被扁平化，backface-visibility失效 - Firefox 尤其严格：即使加了前缀，没
preserve-3d就当普通 2D 处理
典型结构必须这样：
.card {
perspective: 1000px; /* 父级加 perspective */
}
.card-inner {
transform-style: preserve-3d; /* 关键！不能漏 */
}
.card-front,
.card-back {
backface-visibility: hidden; /* 子元素才加这个 */
}移动端 Safari 的隐藏陷阱
iOS 15.4+ 之后，Safari 对 -webkit-backface-visibility 的行为变了：如果父元素用了 will-change: transform，而子元素又没显式触发硬件加速，hidden 可能被忽略。
- 解决办法：给翻转元素强制开启 GPU 渲染，比如加
transform: translateZ(0)或backface-visibility: hidden同时存在 - 不要依赖
will-change做性能优化 —— 它反而可能干扰backface-visibility的判定 - 真机测试比模拟器可靠：iOS 模拟器常不触发真实渲染管线
真正容易被忽略的点不是“写不写前缀”，而是 transform-style: preserve-3d 是否落在正确的父级上 —— 它必须作用于直接包裹 3D 子元素的容器，且不能被 overflow: hidden 或 clip-path 截断。一旦漏掉这一层，所有前缀都白写。
