translate() y translateZ() permiten desplazar un elemento desde su posición original en una dirección específica relativa a su posición actual. Estas funciones forman parte de la propiedad transform de CSS. Además, se pueden utilizar translateX() y translateY() para mover un elemento únicamente en sentido horizontal o vertical.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() - acepta hasta 3 valores;
  • X_value es el desplazamiento a lo largo del eje x. Un valor positivo mueve el elemento hacia la derecha, mientras que un valor negativo lo mueve hacia la izquierda;
  • Y_value es el desplazamiento a lo largo del eje y. Un valor positivo mueve el elemento hacia abajo y un valor negativo lo mueve hacia arriba;
  • Z_value es el desplazamiento a lo largo del eje z. Un valor positivo acerca el elemento al espectador y un valor negativo lo aleja. Si se especifica solo 1 o 2 valores, el navegador aplica el/los mismo(s) valor(es) para el/los eje(s) faltante(s).
• translateX() y translateY() - aceptan 1 valor cada una;
  • translateX(value) especifica el desplazamiento horizontal. Un valor positivo mueve el elemento hacia la derecha y un valor negativo lo mueve hacia la izquierda;
  • translateY(value) especifica el desplazamiento vertical. Un valor positivo mueve el elemento hacia abajo y un valor negativo lo mueve hacia arriba.
• translateZ() - acepta 1 valor. Especifica el desplazamiento a lo largo del eje z, lo que puede crear transformaciones 3D. Un valor positivo acerca el elemento al espectador y un valor negativo lo aleja.

Veamos qué se puede lograr con la ayuda de estas funciones:

Propiedad translate3d()

También es posible añadir desplazamiento de elementos en 3D mediante una sola propiedad. Sin embargo, en general, los usuarios disponen de pantallas 2D, por lo que este movimiento en 3D será invisible. Al mismo tiempo, cada vez más usuarios buscan experimentar la realidad en 3D. Por lo tanto, pronto la mayoría de los usuarios dispondrán de pantallas con tres dimensiones, y esta propiedad será útil. La sintaxis es la siguiente:

transform: translate3d(X_value, Y_value, Z-value);

Se añade el desplazamiento en el eje z como el último valor. Un valor positivo indica un movimiento hacia adelante respecto al usuario. Un valor negativo indica un movimiento hacia atrás respecto al usuario.

A continuación, se muestra un ejemplo:

Probablemente tengas una pantalla 2D igual que yo, y no podemos notar el desplazamiento a lo largo del eje z.