transform-style两个关键字值效果对比实例页面

展示

代码

• HTML：

  <section class="stage preserve-3d">
      <div class="box"></div>
  </section>
  
  <section class="stage">
      <div class="box"></div>
  </section>

• CSS：

  .stage {
      display: inline-block;
      width: 150px; height: 150px;
      background-color: rgba(0, 191, 255, .75);
      perspective: 600px;
  }
  .box {
      height: 100%;
      opacity: .75;
      background-color: darkred;
      transform: rotateY(45deg);
  }
  .preserve-3d {
      transform-style: preserve-3d;
  }