这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

backface-visibility 属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。

在某些情况下,我们不希望元素内容在背面可见,比如实现翻牌效果。

因为2D变换无透视效果,故该属性对2D变换无效。

初始值visible
适用元素transformable elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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  

兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

See also

文档标签和贡献者

此页面的贡献者: broven, fscholz, Sebastianz, hutuxu
最后编辑者: broven,