Tocar para voltear

.card-039 {
  display: block;
  width: 240px;
  height: 150px;
  perspective: 900px;
  cursor: pointer;
  font-family: system-ui,sans-serif;
  user-select: none
}
.card-039 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}
.card-039__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s
}
.card-039 input:checked+.card-039__inner {
  transform: rotateX(180deg)
}
.card-039__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
  padding: 16px
}
.card-039__front {
  background: #18181b;
  color: #fafafa;
  border: 1px solid #3f3f46
}
.card-039__back {
  background: #22c55e;
  color: #052e16;
  transform: rotateX(180deg)
}
.card-039 b {
  font-size: 16px
}
.card-039 small {
  font-size: 12px;
  opacity: .75
}
.card-039:hover .card-039__front {
  border-color: #71717a
}
.card-039 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<label class="card-039">
  <input type="checkbox">
  <span class="card-039__inner">
    <span class="card-039__face card-039__front"><b>Tap to reveal</b><small>What is the CSS trick?</small></span>
    <span class="card-039__face card-039__back"><b>:checked + sibling</b><small>Tap again to flip back</small></span>
  </span>
</label>