backface-visibility

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- ）。

查看更多关于backface-visibility的详细内容...