JSFiddle - React, Tailwind, and code Playground

HTML

<div id="f1_container">
    <div id="f1_card" class="shadow">
        <div class="front face">
            <img src="http://www.thefundu.com/wp-content/uploads/2011/02/BMW-logo-90x90.jpg"/>
        </div>
        <div class="back face">
            <img src="http://www.rte-france.com/sites/all/themes/rte/images/logo.png"/>
        </div>
    </div>
</div>

CSS

#f1_container {
      position: relative;
      margin: 10px auto;
      width: 90px;
      height: 90px;
      z-index: 1;
}
#f1_container {
      perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
}
img {
    width: 90px;
    height: 90px;
}

.face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; 
}
.face.back {
      display: block;
      transform: rotateY(180deg);
}

.face.back {
    -webkit-animation: BackRotate 4s linear infinite;
    animation: BackRotate 4s linear infinite;
}

.face.front {
    -webkit-animation: Rotate 4s linear infinite;
    animation: Rotate 4s linear infinite;
}


@-webkit-keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
} 
@keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
}