JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img"></div>

CSS

.img {
  width: 400px;
  margin: 50px auto;
  perspective: 500px;
}
.img::before,
.img::after {
  content: '';
  display: block;
  height: 100px;
  background: url("http://lorempixel.com/400/200/");
  transform-origin: 0 bottom;
  transition: .5s;
}
.img::after {
  background-position: 0 -100px;
  transform: translateZ(0);
}
.img:hover::before {
  transform: rotateX(-180deg);
}
.img:hover::after {
  transform: translateZ(-1px);
}