CSS backface-visibility：3D 翻转的正背面控制

---

title: CSS backface-visibility：3D 翻转的正背面控制

keywords:

• backface-visibility
• 3D 翻转
• preserve-3d
• 视觉深度
• 合成层

description: '说明 backface-visibility 控制元素背面在 3D 翻转时是否可见，配合 transform-style: preserve-3d

与 perspective 构建卡片翻转与立体层次，并提供可访问与性能建议。'

categories:

• 文章资讯
• 编程技术

---

概述

backface-visibility 决定在 3D 变换使元素背面朝向用户时是否可见，常在卡片翻转效果中隐藏背面，避免镜像文本与视觉干扰。

示例

.scene { perspective: 800px }
.card { transform-style: preserve-3d; transition: transform 300ms }
.card__face { backface-visibility: hidden }
.card.flipped { transform: rotateY(180deg) }

工程建议

• 可访问性：在动效降低偏好下禁用翻转；提供无需翻转的内容路径。
• 性能：限制 3D 层级与动效范围；避免在低端设备过度使用。
• 兼容：测试不同浏览器的背面呈现；提供 2D 回退样式。

参考与验证

• MDN backface-visibility 文档：https://developer.mozilla.org/docs/Web/CSS/backface-visibility