backface-visibility

设置元素不面向屏幕时是否可见。

语法

backface-visibility:visible | hidden;
-webkit-backface-visibility:visible | hidden;    

浏览器支持

IE10+和Firefox支持 backface-visibility 属性。

Opera15+,Chrome 和 Safari 支持替代的 -webkit-backface-visibility 属性。

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。

旋转元素不希望看到其背面时，该属性很有用。

实例代码

<style>
    .wrap{
        width: 300px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        margin: 50px;
        background-color: #00a1d2;
        border: 1px solid #000;
    }
    .rotate0{
        transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
    }
    .rotate180{
        transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
    }
    .backface-visibility-visible{
        backface-visibility:visible;
        -webkit-backface-visibility:visible;
    }
    .backface-visibility-hidden{
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
    }
</style>    

<p>没有翻转前</p>
<div class="wrap rotate0">没有翻转前</div>

<p>翻转后,设置不可见</p>
<div class="wrap rotate180 backface-visibility-hidden">backface-visibility:hidden</div>

<p>翻转后,设置可见</p>
<div class="wrap rotate180 backface-visibility-visible">backface-visibility:visible</div>

效果：

没有翻转前

翻转后,设置不可见

翻转后,设置可见