网站地图    收藏   

主页 > 专题教程 > css >

backface-visibility

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS 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;
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-)。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论