minecraft box c-ARIN final

✨ Sunn Rawie

<div class="container">
    <div class="cube">
        <style>
      body{
		background-image: url('https://media.discordapp.net/attachments/880658641349378088/938444717891403837/minecraft-29.png?width=1178&height=662');
      background-size: 100% 100%;
    }
    .container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    margin: 50% auto;
    text-align:center;
    
    }
    .cube {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: absolute;
    }
    .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(219, 62, 211),rgb(162, 33, 223));
    }
    .top { background-image:url('https://cdn.discordapp.com/attachments/757094757263474808/938440508718608414/Untitled-2.png');
    transform: rotateX(90deg) translateZ(100px);
    }
    .bottom { background-image:url('https://cdn.discordapp.com/attachments/757094757263474808/938443408521977947/Untitled-234.png');
    transform: rotateX(-90deg) translateZ(100px);
    }

.right {background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform: rotateY(90deg) translateZ(100px);
    }
    .left {background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform: rotateY(-90deg) translateZ(100px);   
    }

.front {background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform: rotateX(0deg) translateZ(100px);
    }
    .back {background-image:url('https://media.discordapp.net/attachments/880658641349378088/938438721697619968/Untitled-1.png');
    transform: rotateX(-180deg) translateZ(100px);
}
@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  animation: spin 5s infinite linear;
}
    </style>
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    </div>
</div>