.flip-card:hover .flip-card__body {
  transform: rotateY(0.5turn);
}

.flip-card__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flip-card__front::before {
  content: "";
  position: absolute;
  inset: 1.5em;
  border: 3px solid currentColor;
  transform: translateZ(80px);
}

.flip-card__back {
  background-color: aqua;
  transform: rotateY(180deg);
}

.flip-card__front > div, .flip-card__back > div {
  transform: translateZ(100px);
}