CSS backface-visibility 语法
在 CSS 中，backface-visibility 属性用于控制当元素背面朝向观察者时，它是否可见。这个属性在 3D 动画和翻转效果中非常常见。
语法：
backface-visibility: 关键字;说明：
backface-visibility 的取值有以下 2 种。
visible（默认值）：当元素的背面朝向用户时，背面仍然是可见的。即使元素旋转 180°，你依然可以看到它的 “背面” 内容。它适合希望元素正反两面都展示内容的场景hidden：当元素的背面朝向观察者时，该元素将完全隐藏。看起来就像元素在翻转时 “消失” 了一样，只会看到它的正面（或反面）。它常用于实现卡片翻转效果，翻过去后看不到正面内容。
对于 backface-visibility 属性，小伙伴们要清楚以下几点。
- backface-visibility 是作用在元素自身上的，不会影响它的父元素或子元素。
- 要看到实际效果，元素需要处于 3D 空间中：（1）至少一个父或祖先元素需要设置 perspective。（2）元素自身需要使用 3D 旋转变换，如 rotateX() 或 rotateY()。
注意: 仅使用 translateZ()（Z 轴位移）不会触发背面可见性的判断，必须使用旋转才能看到效果。
CSS backface-visibility 摘要
| 属于 | CSS3 变换 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 否 |
| 默认值 | visible |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS backface-visibility 示例
接下来，我们通过几个简单的例子来讲解一下 CSS backface-visibility 属性是如何使用的。
示例 1：backface-visibility 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.card {
width: 100px;
height: 100px;
margin: 50px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
/* 公共样式 */
.face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
color: white;
backface-visibility: hidden; /* 背面隐藏 */
}
/* 正面 */
.front {
background-color: lightskyblue;
transform: rotateY(0deg);
}
/* 背面 */
.back {
background-color: lightseagreen;
transform: rotateY(180deg);
}
/* 鼠标悬停时翻转 */
.card:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="face front">正面</div>
<div class="face back">背面</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们为 face 元素设置了 backface-visibility: hidden;。当鼠标悬停卡片旋转时，可以看到：当正面旋转离开视图时，它会完全消失；当背面旋转进入视图时，它会突然出现。小伙伴们可以把 backface-visibility: hidden; 这一句代码删除，然后再看看效果如何。
实际上，使用 backface-visibility: hidden; 来隐藏背面，这在创建卡片翻转效果时非常重要，因为它防止了同时看到卡片的正面和背面，从而模拟了物理卡片的翻转效果。
示例 2：backface-visibility 隐藏多面体中的背面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 背景 */
.scene {
width: 200px;
height: 200px;
border: 2px solid #eee;
margin: 50px;
perspective: 800px; /* 3D 视角 */
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f8f8;
}
/* 容器 */
.container {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d; /* 关键：子元素保留 3D 转换 */
transform: rotateX(-30deg) rotateY(30deg); /* 容器旋转以显示 3D 效果 */
transition: transform 1s ease-in-out;
}
/* 所有面的公共样式 */
.face {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(0, 150, 136, 0.7);
border: 1px solid #009688;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
font-size: 1.2em;
backface-visibility: hidden; /* 隐藏所有面的背面 */
}
/* 各个面的定位和旋转 */
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); background-color: rgba(255, 87, 34, 0.7); } /* 橙色 */
.right { transform: rotateY(90deg) translateZ(50px); background-color: rgba(63, 81, 181, 0.7); } /* 蓝色 */
.left { transform: rotateY(-90deg) translateZ(50px); background-color: rgba(156, 39, 176, 0.7); } /* 紫色 */
.top { transform: rotateX(90deg) translateZ(50px); background-color: rgba(255, 193, 7, 0.7); } /* 黄色 */
.bottom { transform: rotateX(-90deg) translateZ(50px); background-color: rgba(76, 175, 80, 0.7); } /* 浅绿 */
/* 鼠标悬停时旋转 */
.container:hover {
transform: rotateX(-120deg) rotateY(120deg);
}
</style>
</head>
<body>
<div class="scene">
<div class="container">
<div class="face front">前</div>
<div class="face back">后</div>
<div class="face right">右</div>
<div class="face left">左</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为所有的面（face）都设置了 backface-visibility: hidden;。当立方体旋转时，会发现那些旋转到背面朝向观察者的面会完全消失，而那些旋转到正面朝向观察者的面则会显示。
如果 backface-visibility: hidden; 删除，此时页面效果如下图所示。小伙伴们可以自行对比一下。
