backface-visibility 是 CSS3 的一个属性，用于控制元素在 3D 空间中旋转时，其背面是否对用户可见。它有两个可选值：

• hidden（默认）：当元素旋转超过 90° 时，背面被隐藏，用户看不到该元素。
• visible：背面始终可见，但显示为镜像（因为是从背面观看）。

这个属性必须配合 3D 变换（如 transform: rotateY()）和 transform-style: preserve-3d 才能发挥作用。

核心区别在于元素旋转超过 90° 时的表现：

• hidden：一旦旋转角度超过 90°（或小于 -90°），元素的正面就会完全消失。这在制作卡片翻转效果时非常有用——当卡片翻到背面时，正面内容自动隐藏。
• visible：背面始终可见，但显示的是镜像画面。例如，文字会左右颠倒。在 90°~270° 区间内，你会看到一个镜像版本的正面内容。

在上方工具中，将角度调到 120° 就能清晰看到区别：左侧卡片正面消失，右侧卡片仍显示镜像的正面。

标准的 CSS 卡片翻转效果依赖以下结构：

1. 外层容器设置 perspective 提供 3D 透视。
2. 内层翻转容器设置 transform-style: preserve-3d 保持 3D 空间。
3. 正面和背面两个子元素都设置 backface-visibility: hidden。
4. 背面元素预旋转 transform: rotateY(180deg)，使其初始时背对用户。
5. 翻转时，改变内层容器的 rotateY 角度（如 180°）。

如果不设置 backface-visibility: hidden，翻转时正面内容会穿透显示（镜像），导致视觉混乱。

backface-visibility 在所有现代浏览器中都有良好支持：

• Chrome 36+、Firefox 16+、Safari 9+、Edge 12+ 均完整支持。
• iOS Safari 9+ 和 Android Chrome 均支持。
• 在旧版浏览器（如 IE10-11）中可能需要 -webkit- 前缀，但现代项目通常无需担心。

根据 Can I Use 数据，全球浏览器支持率超过 97%，可以放心使用。

两者配合使用才能实现完整的 3D 卡片翻转效果：

• transform-style: preserve-3d：告诉浏览器在父容器内保持 3D 空间，让子元素可以在三维空间中定位。没有它，所有子元素会被压平到一个平面。
• backface-visibility：控制单个元素在 3D 空间中背面朝向用户时是否可见。

简单来说，preserve-3d 创建 3D 舞台，backface-visibility 决定演员背对观众时是否隐身。

影响很小，但在极端场景下需要注意：

• backface-visibility: hidden 实际上对性能有益——浏览器可以跳过渲染不可见的背面，减少 GPU 负担。
• 大量 3D 元素同时动画时，preserve-3d 会触发 GPU 合成层，可能增加内存使用。
• 移动端建议控制同时进行 3D 动画的元素数量（通常不超过 10-20 个），以保证 60fps 流畅体验。

对于单个或少量卡片翻转效果，性能完全不是问题。

perspective 属性定义了观察者与 3D 场景之间的距离：

• 较小的值（如 300-500px）：观察者离场景很近，3D 透视效果非常强烈，翻转时形变明显，更具戏剧性。
• 较大的值（如 1500-2000px）：观察者离场景较远，透视效果平缓，翻转看起来更接近平面旋转。
• 推荐值：卡片翻转效果通常使用 600-1000px，既保留了 3D 感又不会过于夸张。

在上方工具中切换透视距离，可以直观感受不同设置的效果差异。