กล่องshowcaseฉบับเฟรมิน

✨ chocolate

<html>
  <head>
    <style>
      
  body{
  background: grey;
  height: 100vh;

text-align: center;

}
.main{
  width:500px;
        height:500px;
        margin:250px auto;
/*   background:greenyellow; */
      }
      
      .all_plate{
        position:relative;
        margin:auto;
        width:500px;
        height:500px;
    transform-style: preserve-3d;
	transform:rotateX(60deg) rotateZ(45deg) rotateY(0deg);
         background:linear-gradient(to bottom, black, white);
        
      }    
      
      
      
      
    .plate{
      position: absolute;
       top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:.8;
      }
  
      .one{
      --i:1;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase1 2s infinite alternate;
      }
       
      .two{
      --i:2;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase2 2s infinite alternate;
      }
       
      
      .three{
      --i:3;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase3 2s infinite alternate;
      }
       
      .four{
      --i:4;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase4 2s infinite alternate;
      }
       
      .five{
      --i:5;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase5 2s infinite alternate;
      }
       
      .six{
      --i:6;
        background:hsl(calc(var(--i) * 30), 100%, 50%);
        transform:translateZ(0px);
        
        animation:showcase6 2s 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);}
      }
      
      
      
           @keyframes showcase5{
        from{transform:translateZ(0px)}
        to{transform:translateZ(250px);}
             
             
      }     
      
      @keyframes showcase6{
        from{transform:translateZ(0px)}
        to{transform:translateZ(300px);}
      }
      
      
  
    
    </style>
    
    
    
  </head>
  
  <body>
    
<div class="main">
  <div class="all_plate">
    <div class="plate one"></div>
    <div class="plate two"></div>
    <div class="plate three"></div>
    <div class="plate four"></div>
    <div class="plate five"></div>
    <div class="plate six"></div>
  </div>
</div>
        
      </div>
      
    </div>
    
    
    
  </body>
  
</html>