backface-visibility属性基本效果示意实例页面

展示

代码

• HTML：

  <section class="stage backface-hidden">
      <div class="box"></div>
      <div class="box"></div>
  </section>
  
  <section class="stage">
      <div class="box"></div>
      <div class="box"></div>
  </section>

• CSS：

  .stage {
      display: inline-block;
      width: 150px; height: 150px;
      border: 1px solid darkgray;
      perspective: 600px;
      transform-style: preserve-3d;
  }
  .box {
      width: inherit; height: inherit;
      opacity: .75;
      background-color: darkred;
      transform: rotateY(225deg);
  }
  .box:first-child {
      transform: rotateY(-45deg);
      background-color: darkblue;
      position: absolute;
  }
  .backface-hidden .box {
      backface-visibility: hidden;
  }