.flip {
  position: relative;
  perspective: 1000;
}
.flip .flip-front,
.flip .flip-back {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition-duration: 0.75s;
}
.flip .flip-front {
  z-index: 5;
}
.flip .flip-back {
  z-index: 0;
  transform: rotateY(-180deg);
}
.flip:hover .flip-front {
  z-index: 5;
  transform: rotateY(180deg);
}
.flip:hover .flip-back {
  z-index: 10;
  transform: rotateY(0deg);
}