JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:red">

    <img id="flipper" class="a flipper" src="http://i66.tinypic.com/2wqbngo.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>

CSS

.flipper {
   position: relative;
   height: 240px;
   width:240px;
   display: inline-block;
   transition: 2.6s;
   transform-style: preserve-3d;
}
.flip {
  transform: rotateY(360deg);
}
img {
  width: 240px;
  height: 240px;
  position: absolute;
}
.a {
  transform: rotateY(33deg);
  /* backface-visibility: hidden; */
}
/* .b { */
  /* transform: rotateY(180deg); */
  /* backface-visibility: hidden; */
/* } */

JavaScript

function doFlip() {
	document.getElementById('flipper').classList.add('flip');
};

function doUnflip() {
	document.getElementById('flipper').classList.remove('flip');
};

function delayFlip() {
	doFlip();
	setTimeout(()=> {
		delayUnflip();
	}, 3000);
};

function delayUnflip() {
	doUnflip();
	setTimeout(()=> {
		delayFlip();
	}, 3000);
 };
 
 delayFlip();