Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

backface-visibility

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

概述

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

See also

文档标签和贡献者

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