JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.ultranoir.com/cdn/js/lib/html5preloader/html5Preloader.js"></script>
<script src="http://www.ultranoir.com/cdn/js/lib/drag.flick/Drag.Flick.js"></script>
<script src="http://www.ultranoir.com/cdn/js/lib/moocheck/moocheck.js"></script>
<section class="container">
    <div id="card">
        <img src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'/>
    </div>
</section>

CSS

.container {
    width: 62px;
    height: 91px;
    position: relative;
    perspective: 400px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
#card figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
#card img:hover {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(180deg);
    transition-duration: 1.5s;
    -webkit-transition-duration:1s;
}