JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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