perspective视点两种写法不同之处示意实例页面

展示

代码

• HTML：

  <section class="stage darkred">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
  </section>
  
  <section class="stage darkblue">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
  </section>

• CSS：

  .stage {
      display: flex;
      height: 150px;
      width: 600px;
      max-width: calc(100% - 2rem);
      border: 1px solid darkgray;
  }
  .box {
      height: 100%;
      flex: 1;
      opacity: .75;
  }
  .darkblue {
      perspective: 600px;
  }
  .darkblue .box {
      background-color: darkblue;
      transform: rotateY(45deg);
  }
  .darkred .box {
      background-color: darkred;
      transform: perspective(600px) rotateY(45deg);
  }