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 |
translateY(y) | Traslada el elemento una distancia de |
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) */
}
