JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>

SCSS

.block {
    position: absolute;
    top:100px;
    left:100px;
    width: 100px;
    height:100px;
    background: blue;
    transform-origin: center center 0px;
    animation-name: rotatespace;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
}
.block:hover {
    transform-origin: center center 0px;
    animation-name: rotateflat;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
}
@-webkit-keyframes rotatespace {
    0% {
        transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
    }
    100% {
        transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
    }
}
@-webkit-keyframes rotateflat {
    0% {
        transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
    }
    100% {
        transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
    }
}