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

CSS 属性 backface-visibility 指定当元素背面朝向观察者时是否可见。

元素的背面是其正面的镜像。虽然在 2D 中不可见,但是当变换导致元素在 3D 空间中旋转时,背面可以变得可见。 (此属性对 2D 变换没有影响,它没有透视。)

语法

/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;

/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

backface-visibility 属性可以指定为下面列出的值

visible
背面朝向用户时可见。
hidden
背面朝向用户时不可见。

正式语法

visible | hidden

举例

这个示例展示了一个拥有透明表面的立方体。

HTML

<table>
  <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>
        Since all faces are partially transparent,
        the back faces (2, 4, 5) are visible
        through the front faces (1, 3, 6).
      </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>
        The three back faces (2, 4, 5) are
        hidden.
      </p>
    </td>
  </tr>
</table>

CSS

/* Classes that will show or hide the
   three back faces of the "cube" */
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/* 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: 550px;
  perspective-origin: 150% 150%;
  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);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  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 2
backface-visibility
Editor's Draft Initial definition.

初始值visible
适用元素transformable elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
backface-visibility
Experimental
Chrome Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 45
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

相关连接

文档标签和贡献者

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