The flip card

<article class="card" aria-labelledby="card-title">
  <!-- Front: the side visible on load -->
  <div class="card__front">
    <h3 id="card-title">What is the capital of Australia?</h3>
    <p>Hint…</p>
  </div>
  <details class="card__details">
    <!-- Trigger: the button that flips the card -->
    <summary>See the answer</summary>
    <!-- Back: hidden, and absent for screen readers,
         until the card is flipped -->
    <div class="card__back">
      <p>Answer…</p>
    </div>
  </details>
</article>

/* The back covers the front when the card is flipped */
.card {
  position: relative;
}

.card summary {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
}

.card__back {
  position: absolute;
  inset: 0;
}

/* The hidden front also leaves the accessibility tree */
.card:has(details[open]) .card__front {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  details[open] .card__back {
    animation: flip 0.35s ease-out;
  }

  @keyframes flip {
    from {
      transform: perspective(900px) rotateY(-80deg);
      opacity: 0.4;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }
}