JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
  <div id='innercontainer'>
    <div class='front'>
      front
    </div>
    <div class='back'>
      back
    </div>
  </div>

</div>

CSS

* {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  
  .front {
    width: 100%;
    height: 100%;
    background-color: red;
  }
  
  .front:hover {
    transform: rotateY(180deg);
  }
  
  #container {
    perspective: 1000;
    width: 200px;
    height: 200px;
  }
  
  #innercontainer {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 5.0s linear;
  }
  
  .back {
    width: 100%;
    height: 100%;
    background-color: blue;
  }