在CSS的3D变换开发中，backface-visibility属性用于定义当元素旋转到背面时是否可见，它只有hidden和visible两个取值，两个取值的作用逻辑完全不同，会直接影响3D翻转、旋转等效果的最终呈现。
backface-visibility属性基础说明
backface-visibility是CSS 3D变换模块中的属性，需要和transform-style: preserve-3d、perspective等3D相关属性配合使用才能生效。它的语法格式如下：
/* 基础语法 */ backface-visibility: visible; backface-visibility: hidden;
默认情况下，该属性的取值为visible，也就是元素背面默认是可见的。只有给元素添加了3D变换（比如rotateY(180deg)）让元素旋转到背面时，两个取值的差异才会体现出来。
visible取值的作用
当backface-visibility取值为visible时，元素旋转到背面后，背面内容会正常显示，不会被隐藏。也就是说，无论元素正面还是背面朝向用户，元素的内容都会呈现出来。
下面通过一个简单的旋转卡片示例演示visible的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
width: 200px;
height: 300px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: visible; /* 取值为visible */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
}
.front {
background-color: #409eff;
}
.back {
background-color: #f56c6c;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="front">正面内容</div>
<div class="back">背面内容</div>
</div>
</body>
</html>
运行上述代码，鼠标悬停卡片时，卡片会旋转180度，此时背面朝向前端，背面内容会正常显示，同时正面的内容也会叠加显示在背面之上，因为正面旋转到背面后并没有被隐藏。
hidden取值的作用
当backface-visibility取值为hidden时，元素旋转到背面后，背面内容会被完全隐藏，不会呈现给用户。这个取值是开发3D翻转卡片、3D轮播等效果的核心配置。
我们把上面示例中的backface-visibility取值改为hidden，再看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
width: 200px;
height: 300px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 取值为hidden */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
}
.front {
background-color: #409eff;
}
.back {
background-color: #f56c6c;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="front">正面内容</div>
<div class="back">背面内容</div>
</div>
</body>
</html>
此时鼠标悬停卡片，卡片旋转180度后，正面因为旋转到背面被hidden规则隐藏，只会显示预先设置了rotateY(180deg)的背面元素，实现正面翻转到背面后只显示背面内容的效果。
两个取值的适用场景对比
| 取值 | 作用 | 适用场景 |
|---|---|---|
| visible | 元素背面可见，旋转到背面后内容正常显示 | 需要同时展示元素正反面内容的3D场景，比如3D旋转展示模型的多面细节 |
| hidden | 元素背面不可见，旋转到背面后内容隐藏 | 翻转卡片、3D轮播、3D相册等需要切换正反面的交互效果 |
注意事项
- backface-visibility只有在元素应用了3D变换（如rotateX、rotateY、rotateZ等）时才会生效，普通2D变换不会触发该属性的作用逻辑。
- 如果父元素没有设置
transform-style: preserve-3d，子元素的3D变换可能会被扁平化，导致backface-visibility的效果不符合预期。 - 部分旧版本浏览器需要添加前缀才能支持该属性，比如
-webkit-backface-visibility，实际开发中可以根据兼容性需求添加对应前缀。
CSSbackface-visibilityhiddenvisible3D_transform修改时间：2026-06-23 03:51:40