背面可见性属性

最后更新：2026-09-13

backface-visibility 背面可见性属性

backface-visibility 用于控制元素在 3D 旋转后，其背面朝向观察者时是否可见。默认值为 visible，背面会镜像显示正面内容；设为 hidden 后，背面朝向观察者时元素不可见，常用于实现卡片翻转、立方体等需要区分正反面的 3D 效果。

分类
初始值	visible
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

backface-visibility: visible | hidden;

⚙️ 取值

值	类型	描述
`visible \| hidden`	关键字	背面是否可见

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
backface-visibility	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
所有主流浏览器均支持

重要： backface-visibility 只在 3D 变换（transform-style: preserve-3d）下生效；2D 旋转不会显示背面。

提示： 卡片翻转效果中，正反面都需要设置 backface-visibility: hidden，且背面预先 rotateY(180deg) 翻到后面。

❓ 常见问题

Q为什么翻转后看到的是镜像文字？

A默认 backface-visibility: visible，元素背面朝向观察者时会把正面内容镜像显示出来，看起来像「透明的倒影文字」。要实现正常的卡片翻转，需要给正反面都设置 backface-visibility: hidden，并把背面元素预先 rotateY(180deg)，翻转时两面交替可见。

Qbackface-visibility 会影响性能吗？

A设为 hidden 时，浏览器可以跳过背面不可见时的绘制工作，在 3D 场景中反而能提升渲染性能，属于推荐做法。相比之下 visible 需要始终渲染正反两面。性能敏感的场景（如大量 3D 卡片）建议统一设置 hidden 并按需控制可见性。

Qbackface-visibility 在 2D 旋转时有效吗？

A没有意义。2D 旋转（如 rotate 45deg）不会把元素翻转过来，背面永远不会朝向观察者，backface-visibility 不生效。它只在 3D 变换下起作用，例如 rotateY(180deg)、rotateX(180deg) 让元素背对观察者时，hidden 才会隐藏背面。

Q如何用 backface-visibility 实现 3D 卡片翻转？

A四步：父容器设 transform-style: preserve-3d；正反两个子元素绝对定位重叠，都设 backface-visibility: hidden；背面元素预先 rotateY(180deg)；交互时给父容器 rotateY(180deg)。配合 transition 过渡，即可得到平滑翻面效果。