.cube-container{perspective:400px;display:flex;align-items:center;justify-content:center}.cube,.cube-container{width:20px;height:20px}.cube{position:relative;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-45deg);animation:spin 8s linear infinite}.face{position:absolute;width:20px;height:20px;background:hsla(207,83%,53%,.7);border:1px solid hsl(207,83%,40%);box-sizing:border-box}.face.front{transform:translateZ(10px)}.face.back{transform:rotateY(180deg) translateZ(10px)}.face.right{transform:rotateY(90deg) translateZ(10px)}.face.left{transform:rotateY(-90deg) translateZ(10px)}.face.top{transform:rotateX(90deg) translateZ(10px)}.face.bottom{transform:rotateX(-90deg) translateZ(10px)}@keyframes spin{0%{transform:rotateX(-30deg) rotateY(-45deg)}to{transform:rotateX(-30deg) rotateY(315deg)}}