JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="flippable-container">
    <img class="flippable" src="http://lorempixel.com/200/200/food" />
</div>

CSS

.flippable-container {
    float: left;
    perspective: 1000px;
    z-index:0;
}
.flippable {
    transition: 0.6s;
    z-index:10;
    position:relative;
    transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
    transform: rotateX(180deg);
    z-index:20;
}