# Tocar para voltear (C 039)

Categoría: Tarjetas  
Etiquetas: flip, 3d, toggle, checkbox, no-js, dark  
Página: https://designforai.dev/es/snippet/card-039

## Prompt

Crea una tarjeta de volteo de 240x150px que se activa con clic sin JavaScript: un label envuelve un checkbox visualmente oculto y la tarjeta; cuando el checkbox está :checked la caja interior rota rotateX(180deg) durante 600ms (volteo vertical). Envoltorio con perspective 900px. Cara frontal: #18181b con borde 1px #3f3f46 y texto blanco (el borde se aclara en hover); cara trasera: verde #22c55e con texto verde oscuro #052e16, prerrotada 180deg en X. Ambas caras con radio 14px, contenido centrado, backface oculta.

## HTML

```html
<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>
```

## CSS

```css
.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; }
```