minecraft box c-ARIN (Copy 11635)

✨ Sunn Rawie

<html>
<head>
	<title>Let's Start</title>
  <style>
/*     @keyframes pang {
		from{
          transform:rotateX(60deg) rotateZ(0deg)}
      to{
          transform:rotateX(60deg) rotateZ(360deg)}
    } */
    @keyframes ling {
      from{
			transform:rotateX(0deg) rotateY(0deg);
      }
      to{
			transform:rotateY(360deg) rotateX(160deg);
      }
    }
    body{
		background-image: url('https://media.discordapp.net/attachments/880658641349378088/938444717891403837/minecraft-29.png?width=1178&height=662');
      background-size: 100% 100%;
    }
    .continer{
		width: 100px;
      height: 100px;
      transform-style: preserve-3d;
      margin:auto;
      text-align:center;
      
      
      
    }
    .square {
		width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      position: fixed;
      transform:rotateX(60deg);
      margin-left:-150px;
      margin-top:10px;
      top: 50%;
      left: 50%;
      animation: ling 5s infinite linear;
    }
    .box {
		transform-style:preserve-3d;
      transform-origin:center bottom;
      background-size:cover;
      background-position:center;
      width:300px;
      height:300px;
      box-shadow:0px -100px 200px #0006 inset;
      position:absolute;
      
    }
    .left {
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform:rotateX(-90deg);
  }
  .right {
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform:rotateX(-90deg) rotateY(90deg);
    transform-origin:left bottom;
  }
  .front {
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform:rotateX(-90deg) rotateY(-90deg);
    transform-origin:right bottom;
  }
  .back{
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform:rotateX(-90deg) rotateY(0deg) translateZ(-300px);
    transform-origin:center bottom;
  }
  .top {
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938434874375798854/il_570xN.png');
    transform: rotateX(180deg) translateZ(-300px);
    transform-origin: center left;
  }
  .bottom {
  background-image:url('https://media.discordapp.net/attachments/880658641349378088/938440144372006974/MC_backzoom.png');
    transform: rotateX(180deg) translateZ(0px);
    transform-origin: center left;
  }
    
  </style>
</head>
<body>
  <div class = "container">
    <div class = "square">
      <div class = "box top"></div>
      <div class = "box bottom"></div>
      <div class = "box left"></div>
      <div class = "box right"></div>
      <div class = "box front"></div>
      <div class = "box back"></div>
    </div>
  </div>

</body>
</html>