backface-visibility属性指定当元素背面朝向观察者时是否可见。默认情况元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。
backface-visibility属性通常和CSS transforms属性结合使用，当一个元素在3D空间中旋转的时候，元素的正面被翻转或旋转之后，通过设置该属性来显示元素的背面。例如一张卡片绕Y轴旋转180度时它的背面会被翻转过来，面向屏幕前的观察者。
因为2D变换无透视效果，所以backface-visibility属性对2D变换无效。
backface-visibility属性在制作翻转扑克牌效果和制作3D立方体效果时非常有用。例如当扑克牌翻转的时候，扑克牌前面的内容应该被遮挡住，而显示扑克牌的背面。如果不使用这个属性，扑克牌正面和背面的元素就不能在翻转动画时进行切换。
官方语法
backface-visibility: visible | hidden
参数值：
visible：表示背面可见，允许显示正面的镜像。hidden：表示背面不可见。
backface-visibility属性的默认值为visible。
例如下面的代码使用backface-visibility属性制作一张可以翻转的扑克牌：HTML标签中包含一个容器.container，用于制作3D透视空间。一个卡片容器div.card，在卡片容器中包含了卡片的正反两个面。
<div class="container">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
然后可以使用下面的CSS样式来制作卡片翻转效果。
.container {
/* 其它通用样式 */
/* 使用perspective属性制作3D空间 */
perspective: 800px;
}
.card {
/* 其它通用样式 */
position: relative;
transition: all .4s linear;
/* 下面这个属性允许子元素在3D空间中进行定位 */
transform-style: preserve-3d;
}
.face {
/* 其它通用样式 */
/* 使用绝对定位使扑克牌的两个面能够堆叠在一起 */
position: absolute;
width: 100%;
height: 100%;
/* 当扑克牌翻转时阻止正面的显示 */
backface-visibility: hidden;
}
.back {
/* ... */
/* 将扑克牌背面翻转180度，这样在扑克牌翻转时背面能够面向观察者 */
transform: rotateY(180deg);
}
/* 当鼠标滑过卡片时，翻转扑克牌，使牌的背面面向观察者 */
.card:hover {
transform: rotateY(180deg);
}
完整的代码和演示请查看下面的在线演示。
适用范围
backface-visibility属性可以使用在任何可以变形（transformable）的元素上。
在线演示
下面的扑克牌翻转是上面演示代码的实际应用效果。这里制作了2张可以翻转的扑克牌，左边扑克牌的backface-visibility属性设置为hidden，右边的扑克牌的backface-visibility属性设置为visible。从效果中可以看到，backface-visibility: hidden;将隐藏扑克的背面，只有在翻转后才能看到扑克牌的背面。而backface-visibility: visible;不会隐藏扑克的背面，翻转后显示的是扑克牌正面图像的镜像。
backface-visibility: hidden;
backface-visibility: visible;
下面再来看一个3D立方体的效果。左边的立方体的backface-visibility属性为默认值visible，右边立方体的backface-visibility属性设置为hidden。
backface-visibility: visible;
backface-visibility: hidden;
浏览器支持
所有的现代浏览器都支持backface-visibility属性：Chrome12+（需要使用前缀-webkit-），Firefox10+（需要使用前缀-moz-），Safari（需要使用前缀-webkit-），Opera15+（需要使用前缀-webkit-），Internet Explorer 10+以及Android 和 iOS 手机浏览器（都需要使用前缀-webkit-）。
