@keyframes view{to{transform:rotateX(325deg)rotateY(395deg)}}.cube-box{width:24px;height:24px;transform-style:preserve-3d;transition:all .3s;animation:4s linear infinite view;position:relative;transform:rotateX(-35deg)rotateY(35deg)}.surface{opacity:.9;backface-visibility:visible;border-radius:8%;width:95%;height:95%;position:absolute}.surface.front{background-color:#de0031;transform:translateZ(12px)}.surface.back{background-color:#de0031;transform:translateZ(-12px)}.surface.left{background-color:#41b882;transform:rotateY(90deg)translateZ(-12px)}.surface.right{background-color:#41b882;transform:rotateY(90deg)translateZ(12px)}.surface.up{background-color:#60dafa;transform:rotateX(90deg)translateZ(12px)}.surface.down{background-color:#60dafa;transform:rotateX(90deg)translateZ(-12px)}