backface-visibility

概述

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

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

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

语法

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;
}

结果

标准

兼容

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!

See also

• Using CSS Transforms