<body>
  <div class='card'>
    <div class='font'>Font</div>
    <div class='back'>Back</div>
  </div>
</body>
body {
  margin: 2rem;
}
.card {
  width: 15rem;
  height: 20rem;
  margin: auto;
  border: 1px solid #000;
  position: relative;
  perspective: 150rem;
}
.font,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 3rem;
  color: #fff;
  padding: 8rem 5rem;
  box-sizing: border-box;
  transition: all 0.5s;
  backface-visibility: hidden;
}
.font {
  background: red;
}
.back {
  background: blue;
  transform: rotateY(-180deg);
}
.card:hover .font {
  transform: rotateY(180deg);
}
.card:hover .back {
  transform: rotateY(0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.