.flipper {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.6s;

}



.front, .back {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

}



.front {

  z-index: 2;

  transform: rotateX(0deg);

}



.back {

  transform: rotateX(180deg);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

}