backface-visibility需配合transform、transform-style、perspective才能生效；单独设置无效，因浏览器默认2D渲染，必须启用3D上下文（如transform-style:preserve-3d），否则背面仍可见。
backface-visibility 不是“设置背面隐藏”就完事的，它必须和 transform、transform-style、perspective 配合才能生效。单独加 backface-visibility: hidden 什么也不会发生。
为什么加了 hidden 却还是能看到背面？
最常见原因是没启用 3D 渲染上下文。浏览器默认把元素当 2D 处理，backface-visibility 只在 3D 变换中起作用。
- 必须给父容器（或自身）设置
transform-style: preserve-3d - 推荐同时加
perspective（写在父容器上），否则翻转会像平面翻页，缺乏立体感 - 如果只用
rotateX/rotateY但没声明transform-style，backface-visibility直接被忽略 - 注意：
transform-style: preserve-3d在 flex 或 grid 容器子项上可能失效，优先套一层普通div
兼容性写法要带前缀吗？
截至 2026 年，Chrome、Firefox、Safari、Edge 全部原生支持 backface-visibility，无需前缀。但如果你的项目仍需兼容旧版 Android Webview（≤4.4）或 IE11，可以保留 -webkit- 和 -ms-：
.card {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
不用写 -moz- —— Firefox 自 16 版起已弃用该前缀，且当前稳定版早已完全支持标准属性。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
hidden 和 visible 的实际表现差异
设为 hidden 后，元素背面不仅不可见，还会被裁剪、不响应鼠标事件、不参与渲染计算（节省一点 GPU 资源）。但要注意几个边界情况：
- 如果背面有
background-image，设为hidden后图像不会加载（现代浏览器优化行为） - 设为
visible时，背面内容依然受opacity和z-index影响，不是“强制显示” -
initial和inherit很少用，除非你明确需要重置或继承逻辑，否则直接写hidden或visible - 动画中频繁切换
backface-visibility值可能导致闪烁，建议只在初始状态设好，靠transform控制显隐
JavaScript 动态控制时的坑
用 JS 设置时别漏掉驼峰命名：element.style.backfaceVisibility，不是 backface-visibility（后者会报错或静默失败）。
- 正确写法：
el.style.backfaceVisibility = 'hidden' - 错误写法：
el.style['backface-visibility'] = 'hidden'（语法合法但无效） - 如果元素由 CSS 类控制，JS 改类名比直接操作 style 更稳妥，避免内联样式优先级干扰
- 注意：设置后不会立即触发重绘，如需立刻读取效果，可加
el.offsetHeight强制同步布局
真正容易被忽略的是：哪怕所有样式都写对了，如果父元素有 overflow: hidden 且卡片旋转后超出边界，背面可能被裁掉——这不是 backface-visibility 的问题，而是容器限制。这时候得调 perspective 值或扩大容器尺寸。
