transform 3D: profundidad real en la página

La pantalla es plana, pero tu CSS no tiene por qué serlo: hay un eje Z que sale de la pantalla hacia tu cara. Con cuatro propiedades — perspective, rotateX/Y, preserve-3d y backface-visibility — construyes tarjetas que se voltean, cubos que giran y galerías con profundidad de cine. Esta lección arma el kit completo; el reto siguiente lo pone a prueba.

perspective: qué tan cerca está tu ojo

La forma habitual es la primera: perspective como propiedad en el contenedor de la escena. 800px es el punto de partida clásico — suficiente drama sin deformar.

Los tres ejes, sin confundirlos nunca más

• rotateZ() es el rotate() de siempre: gira como las manecillas de un reloj COLGADO EN LA PARED frente a ti. El eje Z te apunta a la cara.
• rotateY() gira como una PUERTA: el eje Y es vertical, el elemento muestra su perfil. El de los flips de tarjeta.
• rotateX() gira como una PERSIANA o un aplauso de tapa de portátil: el eje X es horizontal.

<div class="escena">
<figure><div class="carta x">rotateX</div><figcaption>persiana (eje horizontal)</figcaption></figure>
<figure><div class="carta y">rotateY</div><figcaption>puerta (eje vertical)</figcaption></figure>
<figure><div class="carta z">rotateZ</div><figcaption>reloj (eje hacia ti)</figcaption></figure>
</div>
<p class="nota">Hover en cada carta: 55° sobre cada eje, con perspective: 800px en la escena. Quita mentalmente la perspectiva y X e Y solo se verían "encoger".</p>

body { font-family: system-ui; padding: 28px; background: #f8fafc; }
.escena { display: flex; gap: 34px; flex-wrap: wrap; perspective: 800px; }
figure { margin: 0; text-align: center; }
.carta { width: 100px; height: 130px; display: grid; place-items: center; background: #6d28d9; color: white; font-size: 13px; font-weight: 600; border-radius: 12px; transition: transform 350ms ease-out; }
.x:hover { transform: rotateX(55deg); }
.y:hover { transform: rotateY(55deg); }
.z:hover { transform: rotateZ(55deg); }
@media (prefers-reduced-motion: reduce) { .carta { transition: none; } }
figcaption { font-size: 12px; color: #64748b; margin-top: 10px; }
.nota { font-size: 13px; color: #64748b; margin-top: 18px; max-width: 54ch; }

También existe translateZ() — acercar el elemento hacia tu cara (crece con la perspectiva) — y translate3d(x, y, z) que junta los tres ejes.

preserve-3d: la caja de zapatos, no su foto

Aquí está el concepto que decide si tu 3D funciona o se aplana:

Y su compañera inseparable: backface-visibility: hidden. Todo elemento girado más de 90° te muestra su reverso — que por defecto es su contenido en espejo, como una calcomanía vista a través del vidrio. En un flip de tarjeta no quieres ver el frente al revés: quieres que el frente DESAPAREZCA a mitad de giro y aparezca la cara trasera. hidden hace exactamente eso: "si me ves por detrás, no me veas".

Mini-reto

Cinco minutos de laboratorio: toma una tarjeta de "El Observador", mételes perspective: 800px al contenedor y rotateY(25deg) al hover. Ahora juega con la perspectiva: 200px, 500px, 2000px, y quítala del todo. Escribe (mentalmente al menos) una frase que describa cada sensación — ese vocabulario visual es el que usarás para DECIDIR valores en vez de copiarlos.

Qué sigue

Kit completo: perspectiva, ejes, caja real, reversos ocultos. Hora de ensamblarlo TODO en el clásico de los clásicos — la flip card: una tarjeta con frente y reverso que se voltea en 3D. Cronómetro en mano.