当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | backface-visibility

CSS属性参考 | backface-visibility

2016-03-25
麦子学院

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;
1
2
3
4
5
6
backface-visibility: hidden;
1
2
3
4
5
6

下载源代码

浏览器支持

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

相关阅读
Previous:
上一篇:CSS属性参考 | animation-timing-function
Next:
下一篇:CSS属性参考 | background-attachment

我要评论

返回顶部