💻Translaciones 2D Trasladar: La función CSS translate()

Las funciones de translación son aquellas que realizan una transformación en la que mueven un elemento de un lugar a otro. Para ello, las utilizaremos en el interior de la propiedad CSS transform y elegiremos una de las siguientes funciones de translación.

Funciones de translación

Respecto al ámbito 2D, tenemos 3 funciones de translación: translateX() y translateY() para cada eje, y la propiedad de atajo translate(), que es una mezcla de las dos anteriores en una sola función de translación.

Si especificamos un valor positivo en el eje X (horizontal), lo moveremos hacia la derecha, y si especificamos un valor negativo, lo moveremos hacia la izquierda. Ocurre exactamente lo mismo con el eje Y (vertical), que con valores negativos lo movemos hacia arriba y con valores positivos lo movemos hacia abajo:

Funciones	Significado
translateX(x)	Traslada el elemento una distancia de x horizontalmente.
translateY(y)	Traslada el elemento una distancia de y verticalmente.
translate(x, y)	Propiedad de atajo de las dos anteriores.
translate(x)	Equivalente a translate(x, 0)
translateZ(z)	Ver en Transformaciones 3D
translate3d(x, y, z)	Ver en Transformaciones 3D

Por ejemplo, la propiedad transform: translate(20px, -30px) traslada el elemento 20 píxeles a la derecha y 30 píxeles hacia arriba, que es equivalente a utilizar transform: translateX(20px) translateY(-30px).

.element {
  transform: translateX(20px) translateY(-30px);
}

/* La transformación anterior es equivalente a esta (atajo) */
.element {
  transform: translate(20px, -30px);
}

Consejo: En las translaciones, si utilizamos los , podemos hacer referencia al propio tamaño del elemento. Por ejemplo, si indicamos transform: translateX(100%) estaremos desplazando horizontalmente exactamente el tamaño de ancho del elemento.

La propiedad translate

En nuevas versiones de los navegadores, ya se soporta la propiedad individual translate, y no hace falta utilizarla dentro de la propiedad transform.

Propiedad	Valor	Significado
translate	none	No aplica desplazamiento. Valor por defecto.
translate		Desplaza un elemento el tamaño especificado en el eje X.
translate		Desplaza un elemento una cierta cantidad en el eje X y eje Y.
translate		Desplaza un elemento el eje X, eje Y y eje Z.

Como se puede ver, se puede indicar 1 parámetro, 2 parámetros o 3 parámetros, dependiendo de los ejes que quieras desplazar. En el caso de indicar sólo un parámetro, los demás ejes serán 0px por defecto.

Veamos varios ejemplos:

.element {
  translate: 50px;              /* Equivalente a translateX(50px) */
  translate: 50px 150px;        /* Equivalente a translate(50px, 150px) */
  translate: 0 150px;           /* Equivalente a translateY(150px) */
  translate: 50px 150px 100px;  /* Equivalente a translate(50px, 150px, 100px) */
  translate: 0px 0px 30px;      /* Equivalente a translateZ(30px) */
}

Bibliografía:

https://lenguajecss.com/css/transformaciones/transform-translate/