perspective视点两种写法基本效果示意实例页面

展示

代码

• HTML：

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

• CSS：

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