CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 backface-visibility 属性使用方法及示例

CSS3的backface-visibility属性确定被转换元素的“背面”在面对用户时是否可见。。

下表总结了此属性的用法上下文和版本历史记录。

默认值：visible
适用于：可变形元素
继承：没有
可动画制作：否。请参见 动画属性。
版本： CSS3的新功能
JavaScript语法:
object.style.backfaceVisibility="hidden"

backface-visibility的使用语法

该属性的语法如下：

backface-visibility: visible | hidden | initial | inherit

下面的示例演示了如何使用backface-visibility属性。

.flip-container {
        margin: 50px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container:hover .card {
        transform: rotateY(180deg);
    }
    .card, .front, .back {
        width: 130px;
        height: 195px;
    }
    .card {
        position: relative;
        transition: 0.5s all;
        transform-style: preserve-3d;
    }
    .front, .back {
        position: absolute;
        backface-visibility: hidden;
    }
    .front {
        z-index: 1;
        transform: rotateY(180deg);
    }
    .back {
        z-index: 2;
        transform: rotateY(0deg);
    }
测试看看

注意：backface-visibility属性对于创建旋转硬币或卡片翻转之类的动画非常有用，其中将两个不同的图像（即正面和背面）混合在一起以创建更好的3D旋转效果。

属性值

下表描述了此属性的值。

值描述
visible指定背面是可见的，允许正面镜像显示。这是默认值。
hidden指定背面不可见，隐藏正面。
initial将此属性设置为其默认值。
inherit如果指定，则关联元素采用其父元素backface-visibility属性的计算值。

浏览器兼容性

backface-visibility属性浏览器的兼容性，所有主流浏览器均支持该属性。

浏览器图标

  • Firefox 10+ -moz-，16 +

  • Google Chrome 12+ -webkit-，36+

  • Internet Explorer 10+

  • Apple Safari 4+ -webkit-

  • Opera 15+ -o-，23+ -webkit-

进一步阅读

参见以下教程：CSS3过渡，CSS3 3D变换，CSS3动画。

相关属性：perspective，perspective-origin，transform，transform-origin，transform-style，transition。

CSS background 属性CSS3 animation-timing-function 属性