Maquetación Web Dinámica / Transformaciones y transiciones

Reto: la tarjeta que se voltea en 3D

Reto40 min60 XP

El flip card es el "hola mundo" del 3D en CSS — y a la vez un examen honesto: exige perspectiva, preserve-3d, backface-visibility, posicionamiento absoluto del módulo 7 y una transición bien curvada, todo funcionando A LA VEZ. Si te sale, el 3D dejó de ser magia.

Reto

Flip card: frente y reverso

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una tarjeta de perfil que al pasar el cursor (o al recibir foco de teclado) se voltea y muestra su reverso:

<div class="escena">
<div class="carta" tabindex="0" role="button" aria-label="Tarjeta de perfil, actívala para ver el contacto">
  <div class="cara frente">
    <div class="avatar">AV</div>
    <h3>Ana Vargas</h3>
    <p>Diseñadora UI · Bogotá</p>
  </div>
  <div class="cara reverso">
    <h3>Contacto</h3>
    <p>ana@estudio.co</p>
    <p>@anavargas.diseña</p>
  </div>
</div>
</div>
<p class="nota">Pásale el cursor — o dale foco con Tab — y mira el reverso.</p>

body { font-family: system-ui; padding: 24px; background: #f8fafc; display: grid; justify-items: start; gap: 10px; }
.escena { perspective: 900px; }
.carta { position: relative; width: 230px; height: 240px; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
.carta:hover, .carta:focus-visible { transform: rotateY(180deg); }
.carta:focus-visible { outline: 3px solid #a78bfa; outline-offset: 4px; }
.cara { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; border-radius: 16px; backface-visibility: hidden; }
.frente { background: white; border: 1px solid #e2e8f0; }
.frente h3 { margin: 0; color: #1e293b; font-size: 17px; }
.frente p { margin: 0; color: #64748b; font-size: 13px; }
.avatar { width: 64px; height: 64px; margin: 0 auto 6px; display: grid; place-items: center; background: #ede9fe; color: #4c1d95; font-weight: 700; border-radius: 50%; }
.reverso { background: #4c1d95; color: white; transform: rotateY(180deg); }
.reverso h3 { margin: 0 0 4px; font-size: 16px; }
.reverso p { margin: 0; font-size: 13px; color: #ddd6fe; }
@media (prefers-reduced-motion: reduce) { .carta { transition: none; } }
.nota { font-size: 13px; color: #64748b; }

Requisitos:

Tres niveles de estructura: escena (perspectiva) → carta (la que gira) → dos caras. Cada nivel tiene UNA responsabilidad.
Las dos caras ocupan exactamente el mismo espacio (módulo 7: absoluto + inset: 0 sobre un padre relativo) y ninguna muestra su reverso en espejo.
El giro es rotateY(180deg) con transición de 500-700ms y una curva ease-out pronunciada (los flips toleran más duración que un hover — recorren mucho "espacio visual").
Accesible: se voltea también con foco de teclado (tabindex="0" + :focus-visible), con anillo de foco visible.
prefers-reduced-motion: la tarjeta sigue FUNCIONANDO (muestra el reverso), solo que sin el viaje animado.

Reglas

Sin JavaScript y sin imágenes; el avatar es un div con iniciales.
Colores de la casa con contraste AA: reverso violeta oscuro #4c1d95 con texto blanco/#ddd6fe.
El frente NO debe verse en espejo a mitad de giro (sabes qué propiedad lo garantiza).

35:00

Cuando estés listo, arranca el reloj.

El razonamiento — tres decisiones sostienen todo el efecto:

Cada nivel, una responsabilidad. La perspectiva vive en la escena (el "ojo" es del observador, no de la tarjeta); el giro y el preserve-3d viven en la carta (es LA caja de zapatos: si aplanara a sus hijos, adiós reverso); las caras solo se superponen y ocultan su dorso. Cuando un flip falla, el 90% de las veces una propiedad está en el nivel equivocado.
El reverso nace girado. rotateY(180deg) de fábrica: las dos caras son un sándwich espalda con espalda. El giro del padre no "trae" el reverso — lo COMPLETA.
La función sobrevive a la preferencia. Con reduced-motion se apaga la transición, no el transform: quien no tolera el movimiento sigue viendo el contacto de Ana. Accesibilidad es conservar la función, no amputarla.

flip-card.css

Autoevaluación: ¿el frente desaparece limpio a mitad de giro (sin verse en espejo ni un fotograma)? ¿Tab llega a la carta y la voltea con el anillo visible? ¿Con reduced-motion activado en tu sistema, el reverso sigue apareciendo? Tres síes = flip de producción.

Nota honesta para cerrar: el flip por :hover tiene un límite en pantallas táctiles, donde no existe el cursor — ahí el patrón profesional voltea con un tap, que requiere el JavaScript del módulo 14 (o el truco del checkbox del módulo 9, que ya podrías intentar por tu cuenta). El tabindex de hoy ya te cubre el teclado, que era lo innegociable.

Qué sigue

Un objeto girando en 3D: dominado. El segundo reto del módulo baja la espectacularidad y sube la exigencia de CRITERIO: una galería con hover premium donde nada gira 180 grados — todo se insinúa. Micro-movimientos, sombras que responden y la regla 150-300ms aplicada de verdad.