JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div class="front" style="background: red">
				Rushikesh
			</div>
			<div class="back" style="background:green">
				Jogle
			</div>
		</div>
	</div>
        
        
       
        
        <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div class="front" style="background: red">
				Rushikesh
			</div>
			<div class="back" style="background:green">
				Jogle
			</div>
		</div>
	</div>
        
        
        <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div class="front" style="background: red">
				Rushikesh
			</div>
			<div class="back" style="background:green">
				Jogle
			</div>
		</div>
	</div>

CSS

.vertical.flip-container {
    position: relative;
               float: left;
margin-left: 50px;
}

.vertical .back {
    transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
 transform-origin: 100% 50px;
}

.vertical.flip-container:hover .flipper {
    transform: rotateX(-180deg);
}

.flip-container {
    perspective: 1000;
}
	/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 100px;
    height: 100px;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var containers = $(".flip-container")
setInterval(function() {
    var target = containers.eq(Math.floor(Math.random() * containers.size()))
    target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)