Simple Web (Copy 11713)

✨ TADPORN TANNARAT

<html>
<head>
	<title>Let's Start</title>
  <style>
    body{
      background:#eee;
      margin:1em;
      font-family:sans-serif;
    }
    .main{
		margin:auto;
      width:500px;
      height:500px;
/*       transform-style:preserve-3d; */
      perspective:900px;
    }
    
    .all{
		background:black;
      position:absolute;
      width:500px;
      height:500px;
      transform:rotatex(60deg) rotatez(45deg);
      transform-style:preserve-3d;
    }
    .plate{
		position:absolute;
      width:100%;
      height:100%;
/*       background-color:black; */
      opacity: .8;
      animation: move 1s infinite alternate;
    }
    .p1{
		background-color:hsl(0, 53%, 58%);
      animation:move1 1s infinite alternate;
    }
    .p2{
		background-color:hsl(10, 53%, 65%);
      animation:move2 1s infinite alternate;
    }
    .p3{
		background-color:hsl(20, 53%, 73%);
      animation:move3 1s infinite alternate;
    }
    .p4{
		background-color:hsl(30, 60%, 80%);
      animation:move4 1s infinite alternate;
    }
    @keyframes move1{
      from{transform:translatez(0px)}
      to{transform:translatez(40px);}
    }
    @keyframes move2{
      from{transform:translatez(0px)}
      to{transform:translatez(80px);}
    }
    @keyframes move3{
      from{transform:translatez(0px)}
      to{transform:translatez(120px);}
    }
    @keyframes move4{
      from{transform:translatey(0px)}
      to{transform:translatez(160px);}
    }
    
  </style>
</head>
<body>

  <div class="main">
 	<div class="all">
     <div class="plate p1">
     </div>
     <div class="plate p2">
     </div>
     <div class="plate p3">
     </div>
     <div class="plate p4">
     </div>
  </div>
  </div>
</body>
</html>