JSFiddle - React, Tailwind, and code Playground

by Pranab Dey

HTML

<div class="main">
  <div class="image">
		<div class="front">
			<img src="http://img.artlebedev.com/mandership/154/1914.jpg" class="img" />
		</div>
		<div class="back">
			<img src="https://www.welovesolo.com/wp-content/uploads/vecteezy/49/13e1xlbezny.jpg" class="img" />
		</div>
  </div>
</div>

SCSS

$border: 1px solid red;
.msg{
	transition: 0.4s linear;
	position: absolute;
	top:0;
	left:0;
}

.img{
	transition: 0.4s linear;
	width:300px;
	height: 450px;
}
.main{
	border: $border;
	position: absolute;top: 50%; left: 50%;
	transform: translate(-50%,-50%) scale(0.8);
	perspective: 800px;
	width:300px;
	height: 450px;
}
.image{
	position: relative;
}
.front{
	@extend .msg;
}
.back{
	@extend .msg;
	backface-visibility: hidden;
}
.image:hover .front{
	transform: rotateY(-125deg);
	transform-origin: left;
	transition: 0.4s linear;
}
.image:hover .back{
	transform: rotateY(-125deg);
	transition: 0.4s linear;
	transform-origin: left;
}