Showcase 2

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
      }
      .main{
        transform-style:preserve-3d;
        perspective:1000px;
        width:500px;
        height:500px;
        margin:100px auto 0;
      }
      .all_plate{
        background:red;
        width:500px;
        height:500px;
        position:relative;
        transform:rotateX(60deg) rotateZ(45deg) translate(0px);
        background:linear-gradient(to bottom,white,black);
        transform-style:preserve-3d;
      }
      .plate{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:.8;
      }
      .p1{
        --i:1;
        background:red;
        transform:translateZ(0px);
        
        animation:showcase1 1s infinite alternate;
      }
      .p2{
        --i:2;
        background:green;
        transform:translateZ(0px);
        
        animation:showcase2 1s infinite alternate;
      }
      .p3{
        --i:3;
        background:blue;
        transform:translateZ(0px);
        
        animation:showcase3 1s infinite alternate;
      }
      .p4{
        --i:4;
        background:yellow;
        transform:translateZ(0px);
        
        animation:showcase4 1s infinite alternate;
      }
      @keyframes showcase1{
        from{transform:translateZ(0px)}
        to{transform:translateZ(50px);}
      }
       @keyframes showcase2{
        from{transform:translateZ(0px)}
        to{transform:translateZ(100px);}
      }
       @keyframes showcase3{
        from{transform:translateZ(0px)}
        to{transform:translateZ(150px);}
      }
       @keyframes showcase4{
        from{transform:translateZ(0px)}
        to{transform:translateZ(200px);}
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="all_plate">
        <div class="plate p1">
        </div>
        <div class="plate p2">
        </div>
        <div class="plate p3">
        </div>
        <div class="plate p4">
        </div>
      </div>
    </div>
  </body>
</html>