JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotateimg"> name </div>
<div class="rotateimg1"> name </div>

CSS

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
 .rotateimg
{
-webkit-animation: rotate 5s linear infinite 0s;
-moz-animation: rotateup 5s linear infinite 0s;
  -o-animation: rotate 5s linear infinite 0s;
  -ms-animation: rotate 5s linear infinite 0s;
  animation: rotate 5s linear infinite 0s;
}
 .rotateimg1
{
-webkit-animation: rotateanti 10s linear infinite 0s;
-moz-animation: rotateanti 10s linear infinite 0s;
  -o-animation: rotateanti 10s linear infinite 0s;
  -ms-animation: rotateanti 10s linear infinite 0s;
  animation: rotateanti 10s linear infinite 0s;
}


@-webkit-keyframes rotate {
 from {
    -webkit-transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }

}

@-moz-keyframes rotate {
 from {
     -moz-transform: rotate(180deg);
  }
  to {
     -moz-transform: rotate(360deg);
  }

}

@-moz-keyframes rotateup {
 from {
     -moz-transform: rotate(180deg);
  }
  to {
     -moz-transform: rotate(360deg);
  }
   

}



@-o-keyframes rotate {
 from {
    -o-transform: rotate(180deg);
  }
  to {
    -o-transform: rotate(360deg);
  }

}
@-ms-keyframes rotate {
 from {
    -ms-transform: rotate(180deg);
  }
  to {
    -ms-transform: rotateY(360deg);
  }

}


@-webkit-keyframes rotateanti {
 to {
    -webkit-transform: rotateY(0deg);
  }
  from {
    -webkit-transform: rotateY(360deg);
  }

}

@-moz-keyframes rotateanti {
 to {
     -moz-transform: rotateY(0deg);
  }
  from {
     -moz-transform: rotateY(360deg);
  }

}
@-o-keyframes rotateanti {
 to {
    -o-transform: rotateY(0deg);
  }
  from {
    -o-transform: rotateY(360deg);
  }

}
@-ms-keyframes rotateanti {
 to {
    -ms-transform: rotateY(0deg);
  }
  from {
    -ms-transform: rotateY(360deg);
  }

}