这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
backface-visibility
属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。
在某些情况下,我们不希望元素内容在背面可见,比如实现翻牌效果。
因为2D变换无透视效果,故该属性对2D变换无效。
初始值 | visible |
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | 否 |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: visible | hidden
backface-visibility: visibility backface-visibility: visible backface-visibility: hidden
值
- visibility
- 关键字,指定元素背面是否可见,可为以下值:
visible
表示背面可见,允许显示正面的镜像。hidden
表示背面不可见。
示例
有透明面的立方体
HTML Content
<table> <tbody> <tr> <th><code>backface-visibility: visible;</code> </th> <th><code>backface-visibility: hidden;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube showbf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p>All the faces are transparent and the three back faces are visible through the front ones.</p> </td> <td> <div class="container"> <div class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p>No face is opaque, but the three back faces are always hidden now.</p> </td> </tr> </tbody> </table>
CSS Content
/* Shorthand classes that will show or hide the three back faces of the "cube" */ .hidebf div { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .showbf div { backface-visibility: visible; -webkit-backface-visibility: visible; } /* Define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 300px; perspective-origin: 150% 150%; transform-style: preserve-3d; -webkit-perspective: 300px; -webkit-perspective-origin: 150% 150%; -webkit-transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* Define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translateZ(50px); -webkit-transform: translateZ(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px); -webkit-transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); -webkit-transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px) } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); } /* Make the table a little nicer */ th, p, td { background-color: #EEEEEE; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; }
结果
标准
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 backface-visibility |
Working Draft |
兼容
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 12-webkit | 10 (10)-moz 16 (16) |
10 | 15-webkit | (Yes)-webkit |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0-webkit | (Yes)-webkit | 10.0 (10)-moz 16.0 (16) |
8.1 | (Yes)-webkit | (Yes)-webkit |