transform与纸张效果阴影层级控制实例页面

展示

代码

• HTML：

  <h4>默认（纸张底角阴影不可见）</h4>
  <div class="container">
      <div class="page"></div>
  </div>
  
  <h4>容器设置transform:scale(1)</h4>
  <div class="container transform">
      <div class="page"></div>
  </div>

• CSS：

  .container {
      padding: 40px 0;
      background-color: #666;
  }
  .page {
      width: 300px; height: 200px;
      margin: 0 auto;
      padding: 1em 0 2em;
      background-color: #f4f39e;
      box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
      border-bottom-right-radius: 50% 10px;
      position: relative;
  }
  .page::before {
      transform: skew(-15deg) rotate(-5deg);
      left: 15px; bottom: 10px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
  }
  .page::after {
      transform: skew(15deg) rotate(8deg);
      right: 15px; bottom: 25px;
      box-shadow: 8px 8px 10px rgba(0, 0, 0, .4);
  }
  .page:before, .page:after {
      content: "";
      width: 90%; height: 30%;
      position: absolute;
      z-index: -1;
  }
  /* 容器设置这个 */
  .transform {
      transform: scale(1);
  }