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;不会隐藏扑克的背面，翻转后显示的是扑克牌正面图像的镜像。

下面再来看一个3D立方体的效果。左边的立方体的backface-visibility属性为默认值visible，右边立方体的backface-visibility属性设置为hidden。

浏览器支持

所有的现代浏览器都支持backface-visibility属性：Chrome12+（需要使用前缀-webkit-），Firefox10+（需要使用前缀-moz-），Safari（需要使用前缀-webkit-），Opera15+（需要使用前缀-webkit-），Internet Explorer 10+以及Android 和 iOS 手机浏览器（都需要使用前缀-webkit-）。