JSFiddle - React, Tailwind, and code Playground

by rushijogle

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;
}