JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div class='backhide bottom'>bottom</div>
    <div class='backhide top'>top</div>
</div>

CSS

#container, .bottom, .top {
    width: 200px;
    height: 300px;
    position: absolute;
    -webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}

.backhide{
     -moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

#container:hover .bottom {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
#container:hover .top {
-webkit-transform: perspective(800px) rotateY(-180deg);
-moz-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
.bottom {
    background-color: #ff0000;

-moz-transform: perspective(800px) rotateY(180deg);
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
  
}
.top {
    background-color: #e0e0e0;
 
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);

}