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

.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;
}