*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{background:#1a1a1a;display:flex;justify-content:center;align-items:center;height:100vh}.container{width:160px;height:160px;perspective:480px}.cube,.face{width:100%;height:100%}.cube{transform-style:preserve-3d;position:relative;animation:5s linear infinite spin}.face{position:absolute;background-color:#000}.front{transform:translateZ(80px)}.back{transform:rotateY(180deg) translateZ(80px)}.right{transform:rotateY(90deg) translateZ(80px)}.left{transform:rotateY(-90deg) translateZ(80px)}.top{transform:rotateX(90deg) translateZ(80px)}.bottom{transform:rotateX(-90deg) translateZ(80px)}.back,.bottom,.face,.front,.left,.right,.top{background-size:contain;background-repeat:no-repeat;background-position:center}@keyframes spin{from{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}