TranslateZ y Scale3D
Redactado por
Sebastian V. Fecha de publicación
17/07/2024
Tiempo de lectura
7 min
Tema
CSS Transform
La ilusión de la profundidad
Hay una razón por la que los juegos de video, el cine y la realidad virtual son tan inmersivos: tienen profundidad. Los elementos más cercanos son más grandes y más nítidos. Los elementos lejanos son más pequeños y difusos. Nuestro cerebro interpreta esas diferencias de escala y posición como distancia real en el espacio.
CSS puede replicar esa ilusión de profundidad para crear interfaces con capas que se sienten tridimensionales. Las herramientas para lograrlo son translateZ() y scale3d().
translateZ: acercar y alejar elementos
Si translateX mueve en horizontal y translateY en vertical, translateZ mueve un elemento a lo largo del eje de profundidad: hacia ti o hacia el fondo.
translateZ(100px):Acerca el elemento hacia el espectador. Si hay unaperspectiveactiva, se verá más grande.translateZ(-100px):Aleja el elemento. Se verá más pequeño y distante.
Un truco muy popular para crear botones que "salen" en 3D es combinar translateZ con perspective para que el elemento parezca flotar hacia el usuario al hacer hover, mucho más convincente que un simple translateY plano.
scale3d(): escalado tridimensional
La función scale3d(x, y, z) es la versión tridimensional de scale(). Los primeros dos valores (x, y) controlan el escalado en los ejes que ya conoces. El tercer valor (z) escala el elemento a lo largo del eje de profundidad.
En la práctica, escalar en Z es menos común porque no tiene un efecto visual directo en un elemento 2D plano. Pero cuando tienes objetos 3D con volumen real (como el cubo de la lección anterior), scale3d sí tiene un impacto visible en sus proporciones volumétricas.
Paralaje de capas: el efecto de profundidad más popular
Una aplicación fascinante de translateZ es crear escenas con múltiples capas a diferentes profundidades. Cuando el usuario mueve el ratón, cada capa se mueve a velocidades diferentes (las más cercanas se mueven más rápido, las lejanas más lento), creando una ilusión de paralaje tridimensional que se ve absolutamente premium.
Consejo profesional
translateZ() y scale() producen efectos similares en apariencia (ambos hacen que el elemento parezca más grande o pequeño), pero son fundamentalmente diferentes: translateZ mueve el elemento en el espacio 3D de verdad, lo que significa que interactúa correctamente con la perspectiva y con otros elementos 3D. scale() es solo una escala visual plana.
Profundidad con múltiples capas
<div class="escena-profundidad">
<div class="capas">
<div class="capa capa-3">Fondo</div>
<div class="capa capa-2">Medio</div>
<div class="capa capa-1">Primer plano</div>
</div>
</div>Tres capas a distintas profundidades (translateZ) con la escena inclinada para apreciar la profundidad. Pasa el ratón para ver cómo cambia la perspectiva.
Errores comunes
Paralaje de capas
Construye una escena con al menos tres divs a distintas profundidades (translateZ). Detecta el movimiento del ratón con JavaScript y ajusta la rotación del contenedor para crear un efecto de paralaje interactivo.