≡En resumen
- Moverse en el eje Z es acercarse o alejarse del usuario; con perspectiva, el objeto cambia de tamaño aparente.
- En la web se anima con transform (translateZ, translate3d o scale), nunca con top, width o height.
- El parallax 3D con CSS combina perspective en el contenedor con translateZ negativo y un scale compensatorio.
- Los zooms y el parallax son desencadenantes típicos de mareo: respeta prefers-reduced-motion y ofrece alternativas.
- En impresión 3D, el movimiento en Z define la altura de capa y los saltos de la boquilla (Z-hop).
01 ¿Qué es el Z-axis movement o movimiento en el eje Z?
Si el eje Z es la dimensión de la profundidad, el movimiento en el eje Z es cualquier cambio de posición a lo largo de ella: una tarjeta que avanza hacia ti al pasar el ratón, una cámara que se adentra en una escena 3D o la boquilla de una impresora que sube una capa.
En pantalla, el ojo interpreta ese movimiento por el cambio de tamaño y de perspectiva. Por eso es tan eficaz para dirigir la atención y tan delicado: un acercamiento brusco se percibe como algo que se abalanza sobre ti.
02 Cómo animar en el eje Z con CSS
La base son las transformaciones 3D: el contenedor define la perspective (la distancia del observador) y el elemento se mueve con translateZ() o translate3d(), animado con transition, @keyframes o la Web Animations API. Sin perspectiva, el movimiento en Z no se ve.
Hover con profundidad
Una tarjeta avanza unos píxeles en Z al pasar el ratón. Con perspective de 800px o más el efecto es sutil y elegante.
Tarjetas que giran
rotateY() con transform-style: preserve-3d y backface-visibility: hidden para mostrar el reverso de una tarjeta.
Entradas desde el fondo
Elementos que aparecen desde translateZ negativo mientras aumenta su opacidad.
Animaciones ligadas al scroll
animation-timeline: scroll() o view() vincula la animación al desplazamiento sin JavaScript. MDN aún no la considera Baseline, así que prevé una alternativa.
.grid { perspective: 900px; }.card { transition: transform .3s ease-out; }.card:hover { transform: translateZ(40px); }
El resultado es parecido a un scale(1.05), pero con una diferencia: con perspectiva, la tarjeta se deforma levemente según su posición respecto al punto de fuga, lo que refuerza la sensación de espacio.
03 Parallax 3D: movimiento en Z ligado al scroll
El efecto parallax consiste en que las capas lejanas se desplacen más despacio que las cercanas al hacer scroll. La versión puramente CSS se apoya en el eje Z: el contenedor que hace scroll tiene perspective, y las capas de fondo se alejan con translateZ negativo. Como al alejarse se ven más pequeñas, se compensa con scale.
-
1
Contenedor con perspectiva
Da al contenedor de scroll height: 100vh, overflow-y: auto y perspective: 1px.
-
2
Capas en profundidad
Cada capa de fondo recibe un translateZ negativo: cuanto más lejos, más lento se desplaza.
-
3
Escala compensatoria
Aplica scale = 1 + (−translateZ ÷ perspective). Con perspective 1px y translateZ(−2px), la escala es 3.
-
4
Prueba y alternativa
Verifica en móviles y desactiva el efecto con prefers-reduced-motion.
La ficha del parallax cubre sus tipos, herramientas y su efecto en el SEO; aquí nos quedamos con el mecanismo en el eje Z, que es el mismo que usan muchos «scrollytelling» y escenas 3D.
04 Rendimiento: cómo animar en Z sin tirones
Según la guía de animaciones de web.dev, las propiedades más baratas de animar son transform y opacity, porque se resuelven en la fase de composición y no obligan a recalcular el diseño ni a repintar. Animar top, left, width o height provoca justo lo contrario.
- ✓Anima solo transform y opacity; el movimiento en Z ya es un transform.
- ✓Usa will-change: transform con moderación, solo en elementos que vayan a animarse enseguida, y quítalo después.
- ✓Evita muchas capas 3D simultáneas: cada una consume memoria de GPU, sobre todo en móviles modestos.
- ✓No enlaces animaciones pesadas a cada evento de scroll con JavaScript; usa requestAnimationFrame, IntersectionObserver o animaciones ligadas al scroll en CSS.
- ✓Mide con el panel de rendimiento del navegador y con un móvil de gama media, no solo en tu portátil.
- ✓Recuerda que un transform crea un contexto de apilamiento y puede alterar el z-index de los hijos.
05 Accesibilidad: prefers-reduced-motion y WCAG 2.3.3
Los movimientos en profundidad, los zooms y el parallax están entre los desencadenantes más habituales de mareo en personas con trastornos vestibulares. Los sistemas operativos permiten pedir menos movimiento (en Windows 11, Accesibilidad > Efectos visuales > Efectos de animación; en macOS e iOS, Reducir movimiento), y la web puede leer esa preferencia con la media query prefers-reduced-motion, disponible en los navegadores principales desde 2020.
@media (prefers-reduced-motion: reduce) { .card, .parallax-layer { transform: none; transition: opacity .2s; }}
No hace falta eliminar toda animación: basta con sustituir el movimiento por un fundido suave que mantenga la información.
06 Movimiento en el eje Z fuera de la web: 3D, vídeo e impresión
| Ámbito | Qué es moverse en Z | Ejemplo |
|---|---|---|
| Gráficos 3D y videojuegos | Desplazar la cámara u objetos en profundidad | Travelling de cámara hacia un producto en un configurador 3D |
| Vídeo y cine | Dolly: la cámara se acerca físicamente, a diferencia del zoom óptico | El dolly zoom o efecto vértigo, popularizado por Hitchcock |
| Impresión 3D | Subir la boquilla o bajar la cama una altura de capa | Capas de 0,2 mm y Z-hop para no rozar la pieza al desplazarse |
| CNC y robótica | Bajar o subir la herramienta o la pinza | Avance de penetración de una fresa o toma de una pieza |
En máquinas, un movimiento en Z preciso exige antes un eje bien calibrado: lo explicamos en la ficha de alineación del eje Z. En vídeo y motion graphics, el movimiento en profundidad es un recurso narrativo de la animación de vídeo que conviene dosificar igual que en la web.
07 ¿Cuándo usar movimiento en el eje Z en tu web?
| Sí suele funcionar | Mejor evitarlo |
|---|---|
| Microinteracciones breves (hover, pulsación) | Zooms a pantalla completa al hacer scroll |
| Transiciones entre vistas que explican de dónde viene un elemento | Fondos que se mueven sin parar |
| Configuradores y visores de producto 3D | Textos largos sobre capas en movimiento |
| Narrativas visuales en campañas puntuales | Efectos en formularios y procesos de compra |
La regla práctica: el movimiento debe explicar algo (jerarquía, origen, relación entre elementos) o no estar. Integrarlo desde el principio en un proyecto de diseño y desarrollo web permite equilibrar impacto visual, rendimiento y accesibilidad.
Preguntas frecuentes sobre Z-axis movement
Es el movimiento a lo largo del eje de profundidad: un objeto, una cámara o una herramienta que se acerca o se aleja. En la web se consigue animando translateZ() con perspectiva.
Se define perspective en el contenedor y se aplica transform: translateZ() o translate3d() al elemento, animándolo con transition o @keyframes. Valores positivos lo acercan y negativos lo alejan.
Porque falta perspectiva. Sin perspective en el padre o perspective() en la propia transformación, el desplazamiento en Z no cambia el tamaño aparente del elemento.
La técnica de parallax solo con CSS sí: aleja las capas de fondo con translateZ negativo dentro de un contenedor con perspectiva y compensa su tamaño con scale. Las versiones con JavaScript suelen mover las capas en el eje Y.
Poco si solo animas transform y opacity y limitas el número de capas. Mucho si animas propiedades de diseño, abusas de will-change o disparas cálculos en cada evento de scroll.
Es una media query de CSS que detecta si la persona ha pedido reducir el movimiento en su sistema operativo. Sirve para desactivar o suavizar zooms, parallax y otras animaciones.
Es una pequeña subida de la boquilla en el eje Z durante los desplazamientos sin extruir, para no rozar ni arrastrar la pieza ya impresa.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗