B-Kwan QE 64070179 พรีม-ประภัสสร

✨ นางสาวประภัสสร ไชยเพ็ชร

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
      background-image:url('https://th.bing.com/th/id/R.7c9483f1f79fd0071921d78f9765bb29?rik=UmUMDIE52h66WA&riu=http%3a%2f%2fwww.mediafire.com%2fconvkey%2f45af%2f7vosbdmg49thffpfg.jpg&ehk=Slg%2bVspKNK6NJL5097dPZ4l%2fo%2f%2btn50W0E08E%2fp8PYI%3d&risl=&pid=ImgRaw&r=0');
      background-size:cover;
      background-position:center;
      margin:1em;
      font-family:sans-serif;
        
      }
    .main{
      transform-style:preserve-3d;
      width:300px;
      height:300px;
      margin:600px auto 0;
    }
    .all_plate{
      width:300px;
      height:300px;
      position: relative;
      transform-style:preserve-3d;
      transform:rotateX(60deg);
      animation:base 9s infinite linear;
      
    }
    .plate{
		transform-style:preserve-3d;
      transform:rotateX(-90deg);
      transform-origin:center bottom;
      background-image:url('https://lh3.googleusercontent.com/9ieuq5afKygaQ0ClCySYS_me4Qig_qcuaddFB7563vjRXvxasVmWm1yvJwTkilwOuq70VQIgZbohFqH1wHvXHQ=s400');
      background-size:cover;
      background-position:center;
      width:300px;
      height:300px;
      box-shadow:0px 0px 10px #0008 inset;
      position:absolute;
      left:0;
      top:0;
      }
        
      }
    .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); 
    }
    @keyframes base{
      from{transform:rotateX(60deg) rotateZ(0deg)}
      to{transform:rotateX(60deg) rotateZ(360deg)}
    }
      
  </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>