SunSupawat Codemaster From Namek Planet

✨ SUPAWAT RONGSOONGNEON

<html>
<head>
	<title>Spinning Emerald by SunSupawat Perty C-Arin</title>
  <style>
    body{
      background:#eee;
      margin:1em;
      font-family:sans-serif
      perspective:1000px; 
    }
    .main{
      transform-style:preserve-3d;
      perspective:1000px;
      width:500px;
      height:500px;
      margin:100px auto 0;
      transform:scale(.5);
    }
    .all_plate{
      width:300px;
      height:300px;
      position:relative;
      transform-style:preserve-3d;
      transform:rotateX(60deg);
      background:transparent;
      animation:base 10s infinite linear;

}
    .plate{
      background:transparent;
      transform-origin:center bottom;
      background-image:url('http://pngimg.com/uploads/emerald/emerald_PNG2.png');
      background-size:cover;
      background-position:center;
      width:300px;
      height:300px;
      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;
 }
  
    @keyframes base{
      from{transform:rotateY(0deg) rotateX(90deg)}
      to{transform:rotateY(360deg) rotateX(90deg)}

}
  </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>
  <ul>
</body>
</html>