JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotate">
    <p>Transitions +
    Perspective</p>
</div>
<div class="rotate1">
    <p>Normal</p>
</div>

CSS

.rotate:hover {
    -webkit-transform: perspective(900px)rotateY(40deg);
    -moz-transform: perspective(900px)rotateY(40deg);
    -ms-transform: perspective(900px) rotateY(40deg);
    -o-transform: perspective(900px) rotateY(40deg);
    transform: perspective(900px)rotateY(40deg);
}
.rotate1:hover {
    -webkit-transform: rotateY(-40deg);
    -moz-transform: rotateY(-40deg);
    -ms-transform: rotateY(-40deg);
    -o-transform: rotateY(-40deg);
    transform: rotateY(-40deg);
}
p {
    text-align:center;
    margin-top:90px;
}
.rotate {
    width:200px;
    height:200px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
    
    -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s;
}
.rotate1 {
    width:200px;
    height:200px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
}