Translaciones 2D

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) */
}