QE3 B-Kwan กายเวอร์-ธาดา (Copy 12574)

✨ TADA TEERAWARAKUL

<html>
<head>
	<title>Let's Start</title>
  <style>
    body{
      background-image:url('https://th.bing.com/th/id/R.74119510804c1bfb3f52c9167d4543cc?rik=0sAYJFFjU6%2f6UQ&riu=http%3a%2f%2fminecraftgames.co.uk%2fgames%2fimg%2fhd-minecraft-cave-wallpaper-1920x1080.jpg&ehk=46a6ivOCDfhWdHnVv3arcRSu%2bRf%2boomAg9yWDisXvyo%3d&risl=&pid=ImgRaw&r=0');
      background-size:cover;
      background-position:center;
      margin:1em;
      font-family:sans-serif;
      perspective:100vw;
    }
    .main{
		transform-style:preserve-3d;
      /*perspective:1000px;*/
      width:300px;
      height:300px;
      margin:auto;
      transform:translatey(200px) scale(.5);
      animation:main 3s infinite linear alternate;
    }
    .all_plate{
		width:300px;
      height:300px;
      position:relative;
      transform-style:preserve-3d;
      transform:rotateX(60deg);
      /*background:red;*/
      animation:base 5s infinite linear alternate;
    }
    .plate{
		transform-style:preserve-3d;
      transform:rotateX(-90deg);
      transform-origin:center bottom;
      background-image:url('https://i.postimg.cc/hjw5b4Q6/1080p-minecraft-coal-ore-wallpaper-by-iwithered-d6nzwpn.png');
      background-size:cover;
      background-position:center;
      width:300px;
      height:300px;
      box-shadow:0px 0px 10px #0008 inset;
      position:absolute;
      left:0;
      top:0;
/*       opacity:.5; */
    }
    .p1{
		transform:rotateX(-90deg);
    }
    .p2{
		transform:rotateX(-90deg) rotateY(90deg);
      transform-origin:left bottom;
    }
    .p3{
		transform:rotateX(-90deg) rotateY(-90deg);
      transform-origin:right bottom;
    }
    .p4{
		transform:rotateX(-90deg) rotateY(0deg) translateZ(-300px);
      transform-origin:center bottom;
    }
    .p5{
		transform:rotateX(0deg);
      transform-origin:center top;
    }
    .p6{
		transform:translateZ(300px);
/*       transform-origin:center top; */
      
    }
    @keyframes base{
      from{transform:rotateX(60deg) rotateZ(0deg)}
      to{transform:rotateX(60deg) rotateZ(180deg)}
    }
    @keyframes main{
      from{transform:translatey(200px) scale(.5);}
      to{transform:translatey(200px) scale(1);}
    }
  </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 class="plate p5">
        </div>
      <div class="plate p6">
        </div>
      
    </div>
  </div>
</body>
</html>