<div id="img-box">
  <img id="img-1" src="http://p9.qhimg.com/bdr/__85/t011b5468aa50510dfd.jpg" alt="">
  <img id="img-2" src="http://p4.qhimg.com/bdr/__85/t01a82680d6a0fb7505.jpg" alt="">
</div>

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00d8d6;
  perspective: 1200px;
}

#img-box {
  width: 400px;
  height: 600px;
  transform-style: preserve-3d;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 0 15px rgb(0, 0, 0);
  overflow: hidden;
  backface-visibility: hidden;
  transition: 2s;
}

body:hover #img-2 {
  transform: rotateY(0deg);
}

body:hover #img-1 {
  transform: rotateY(-180deg);
}

#img-2 {
  transform: rotateY(180deg);
}