Transform 3D
Redactado por
Sebastian V. Fecha de publicación
13/07/2024
Tiempo de lectura
8 min
Tema
CSS Transform
Rompiendo la cuarta pared del navegador
Durante décadas, la web vivió en dos dimensiones. Las páginas eran documentos planos, como hojas de papel digital. Podías hacer cosas en la pantalla: moverlas izquierda y derecha (eje X), arriba y abajo (eje Y). Pero siempre en ese plano bidimensional, sin profundidad real.
Luego llegó CSS 3D Transform y cambió las reglas del juego. De repente, los navegadores podían simular un espacio tridimensional, con un nuevo eje imaginario que "entra" y "sale" de tu pantalla: el eje Z.
Y con eso, aparecieron las tarjetas que se voltean, los carruseles que rotan en el espacio, los efectos de paralaje con profundidad real, y las interfaces que hacen que el usuario sienta que está tocando algo físico.
Los dos pilares del 3D en CSS
Para que el 3D funcione en CSS, necesitas entender dos propiedades fundamentales que trabajan juntas:
- perspective: Se aplica al contenedor padre. Define la distancia imaginaria desde la que el "ojo del espectador" observa la escena. Un valor pequeño (400px) crea una perspectiva muy exagerada y dramática. Un valor grande (2000px) crea una perspectiva muy sutil, casi plana.
- transform-style: preserve-3d: Se aplica al elemento que tiene hijos que se transforman en 3D. Sin esta propiedad, los hijos siempre se "aplanarán" sobre el plano 2D, perdiendo toda sensación de profundidad.
El eje Z: profundidad
Imagina que tu pantalla es una ventana. El eje X va de izquierda a derecha. El eje Y va de arriba a abajo. El eje Z es una lanza imaginaria que apunta directamente hacia tus ojos, perpendicular a la pantalla.
translateZ(100px):Mueve el elemento hacia ti (se ve más grande, más cerca).translateZ(-100px):Aleja el elemento de ti (se ve más pequeño, más lejos).
La diferencia entre 2D y 3D
Un elemento 2D plano solo puede moverse en X e Y. Si lo rotas, parece que "escala" o se aplana. Un elemento en un contexto 3D correcto (con perspective y preserve-3d) realmente ocupa el espacio. Cuando lo rotas, puedes ver sus lados, su espesor, su profundidad. Esa es la diferencia entre la ilusión y la realidad tridimensional.
Consejo profesional
perspective se aplica en el PADRE, no en el elemento que se transforma. Un error muy común es poner perspective y transform en el mismo elemento. Tampoco olvides transform-style: preserve-3d en el contenedor de las caras del cubo, o todas las transformaciones de los hijos se aplanarán sobre el plano de la pantalla.
Un cubo rotando en CSS puro
<div class="escena-3d">
<div class="cubo">
<div class="cara cara-frente">Frente</div>
<div class="cara cara-atras">Atrás</div>
<div class="cara cara-derecha">Dcha</div>
<div class="cara cara-izquierda">Izq</div>
</div>
</div>Un cubo 3D rotando construido únicamente con CSS. Cada cara posicionada con translateZ y rotaciones. Todo el espacio 3D está creado con perspective y preserve-3d.
Errores comunes
Tu primer espacio 3d
Crea una escena con perspective: 800px y dentro un div con transform-style: preserve-3d. Anima su rotateY de 0 a 360deg en un keyframe infinito y observa el espacio 3D cobrando vida.