JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div>

</div>

CSS

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);           
    }

    100% {
        -webkit-transform: rotateX(var(--x)) rotateY(var(--y)) rotateZ(var(--z));
        transform: rotateX(var(--x)) rotateY(var(--y)) rotateZ(var(--z));

    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0) rotateY(0) rot;           
    }

    100% {
        -webkit-transform: rotateX(var(--x)) rotateY(var(--y)) rotateZ(var(--z));
        transform: rotateX(var(--x)) rotateY(var(--y)) rotateZ(var(--z));
    }
}

div {
  height: 100px;
  width: 100px;
  background: red;
  animation: rotate 1s linear 0s infinite normal;
  --x: 45deg;
  --y: 45deg;
  --z: 45deg;


}