CSS 属性

CSS 属性 backface-visibility 决定元素背面朝向用户时的可见性。

元素的背面只不过是元素正面的镜像。当一个元素在三维空间中变换和旋转时，背面可以变得可见。由于 2D 变换没有透视，因此该属性对二维空间没有影响。

属性值

CSS 属性 backface-visibility 采用以下值之一:

  • visible:背面在转向用户时可见。

  • hidden:背面隐藏且不可见当转向用户时。

适用范围

所有可变形元素。

语法

backface-visibility = visible | hidden;

CSS backface-visibility: visible 

以下示例演示了设置为可见的 CSS 属性 backface-visibility 的使用。立方体被赋予一个透视值，因此它在 3D 空间中可见。

<html>
<head>
<style>
   .show div {
      backface-visibility: visible;
   }

   .container {
      width: 150px;
      height: 150px;
      margin: 75px 0 0 75px;
      border: none;
   }

   .cube {
      width: 100%;
      height: 100%;
      perspective: 350px;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(178, 0, 178, 0.5);
      transform: translateZ(50px);
   }

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

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

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

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

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 
</style>
</head>
<body>
   <h1>backface-visibility: visible</h1>
   <p>
      The back faces (2, 4, 5) are visible through the front faces (1, 3, 6).
   </p>
   <div class="container">
   <div class="cube show">
      <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>
</body>
</html>

CSS backface-visibility: hidden

以下示例演示了 CSS 属性 backface-visibility 的使用，该属性设置为隐藏，使结构的背面对用户不可见。

<html>
<head>
<style>
   .hide div {
      backface-visibility: hidden;
   }

   .container {
      width: 150px;
      height: 150px;
      margin: 75px 0 0 75px;
      border: none;
   }

   .cube {
      width: 100%;
      height: 100%;
      perspective: 350px;
      perspective-origin: 120% 120%;
      transform-style: preserve-3d;
   }

   .face {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 80px;
      font-size: 3.5em;
      color: white;
      text-align: center;
   }

   .front {
      background: rgba(178, 0, 178, 0.5);
      transform: translateZ(50px);
   }

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

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

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

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

   .bottom {
      background: rgba(0, 0, 0, 0.2);
      transform: rotateX(-90deg) translateZ(50px);
   } 
</style>
</head>
<body>   
   <h1>backface-visibility: hidden</h1>
   <p>Back faces (2, 4, 5) are hidden.</p>
   <div class="container">
   <div class="cube hide">
      <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>   
</body>
</html>