JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="rotator">
        <h1>test</h1>
        <div>bla bla bla.</div>
    </div>
</div>

CSS

.wrapper {
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.rotator {
    position:relative;
    top:40px;
    -webkit-transform: rotateY(-15deg);
    -moz-transform: rotateY(-15deg);
    -ms-transform: rotateY(-15deg);
    -o-transform: rotateY(-15deg);
    transform: rotateY(-15deg);
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    -ms-transition: -ms-transform 1s;
    transition: transform 1s;
    height:300px;
    width: 200px;
    background-color:#c30000;
}
.rotator:hover {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}