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 class="front"  src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2.png' alt='Title of image'></img>
        <img class="back"  src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'></img>
  </div>
</section>

CSS

div, img {
   -webkit-backface-visibility: hidden; 
  -webkit-transform-style: preserve-3d;
}

img {
    position: relative;
}

.container { 
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
    margin: 0px;
}

.img {
    top: 0px;
    position: absolute;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
      transition: transform 1s;
  transition: -webkit-transform 1s;

}

.container:hover #card {
    -webkit-animation: rotate 3s linear infinite;
}

.back {
  -webkit-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
    position: absolute;
    top: 0px;
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotateY(0deg)}
    to{ -webkit-transform: rotateY(360deg)}
}