JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<div class="container">
  <div class="inner">
   
        <div class="front">
            <p>Hello everybody</p>
        </div>
       
       <div class="back">
            <p>Byebye everybody</p>
        </div>
      
  </div>
</div>

CSS

.container {
    position:absolute;
    perspective: 1000px;
     width:200px;
    height:200px
}

.container .inner {
    transform-style: preserve-3d;
    transition: all 1s;
     width:100%;
    height:100%;
    text-align:center;
    line-height:150px
}

.container .front {
    position:absolute;
    z-index:2;
    background:grey;
    backface-visibility: hidden;
    transform:rotateY(0deg);
    width:100%;
    height:100%
}

.container .back {
 background:#ccc;
 position:absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  width:200px;
  height:200px
}

.container:hover .inner {
  transform: rotateY(180deg);
}