JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='item'></div>
</div>

CSS

.container, .item {
    width: 200px;
    height: 200px;
}
.container {
    perspective: 200px;
}
.container:hover .item {
    transform: rotateX(180deg);
}
.item {
    background-color: #ff0000;
    backface-visibility: hidden;
    transition: all 3000ms;
}