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动画

相关属性:perspectiveperspective-origintransformtransform-origintransform-styletransition