QE3 B-Kwan ปูนิ่ม-นุ่มนวล

✨ 172 NUMNUAL MAKHAI

<html>
<head>
	<title>Let's Start</title>
  <style>
    body{
      background-image:url('https://www.img.in.th/images/4b9d5c09e525d2550f590c51eb90bdd4.jpg');
      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: 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://www.img.in.th/images/69004a2f23e1ff49b40d54d0789c3715.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:translate(-20%, 100%) scale(.5);}
      to{transform:translate(-20%, 100%) 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>