La traslación consiste en desplazar un objeto de una ubicación a otra en un espacio concreto, sin alterar su orientación ni su tamaño. En términos matemáticos, es como si estuviéramos modificando las coordenadas del elemento en un espacio que puede ser bidimensional o tridimensional.
En CSS, la traslación de objetos puede realizarse a partir de la propiedad de transformación transform junto con una serie de funciones que permiten trabajar tanto en un plano de dos dimensiones como en un espacio de tres dimensiones. Además, también puede usarse la propiedad CSS translate.
Algunas funciones permiten trasladar elementos en 2D y otras permiten trasladarlos a través de los tres ejes, en 3D. A continuación se muestra una lista completa de las funciones relativas al desplazamiento o traslación:
| Función | Descripción |
|---|---|
translateX() | Traslada el elemento a través del eje horizontal (X). |
translateY() | Traslada el elemento a través del eje vertical (Y). |
translate() | Abreviatura para la traslación en 2D (X, Y). |
translateZ() | Traslada el elemento a través de la profundidad (Z). |
translate3d() | Abreviatura para la traslación en 3D (X, Y, Z). |
Por defecto, el punto de traslación es el centro geométrico de los elementos, pero se puede modificar con la propiedad CSS transform-origin.
La función ‘translateX()’
La función translateX() se utiliza como valor de la propiedad CSS transform y permite desplazar horizontalmente un elemento, desde una ubicación a otra, siguiendo el eje X de un plano de dos dimensiones.
Como parámetro, esta función admite un valor numérico que puede ser en unidades de longitud o porcentaje. Si el valor es positivo, el elemento será desplazado hacia la derecha, y si es negativo se moverá hacia la izquierda.
Vamos a crear un contenedor cuadrado de lado 40 píxeles, y en su interior colocamos otro elemento cuadrado, del mismo tamaño, pero de color turquesa. Desplazamos el objeto turquesa 20 píxeles a la derecha.
Código CSS:
.contenedor {
background: #ff7f2aaa;
border: 1px solid #ff7f2a;
display: inline-block;
height: 40px;
width: 40px;
}
.contenido {
background: teal;
height: 40px;
width: 40px;
}
.trasladarX {
transform: translateX(20px);
}
Resultado:
AR
Tal y como se puede ver, en el caso base (izquierda), el objeto turquesa está centrado respecto el contenedor, mientras que en el segundo caso, este objeto se ha movido 20 píxeles a la derecha.
La función ‘translateY()’
La función translateY() también está pensada para usarse como valor de la propiedad CSS transform. En este caso, permite desplazar un elemento de forma vertical, es decir, a través del eje Y de un plano de dos dimensiones.
Esta función también admite un único parámetro como valor, que debe ser un valor numérico que represente una longitud, en unidades relativas o absolutas, permitiendo el uso de porcentajes. Cuando el valor es positivo se desplaza el elemento hacia abajo, y si es negativo se traslada hacia arriba.
Vamos a ver un ejemplo similar al anterior, pero esta vez trasladando el elemento hijo, de color turquesa, 7 píxeles hacia abajo.
Código CSS:
.trasladarY {
transform: translateY(7px);
}
Resultado:
AR
En el caso base (izquierda), se puede ver el objeto turquesa centrado a su elemento contenedor, mientras que en el segundo caso (derecha), el objeto turquesa se ha trasladado 7 píxeles abajo.
La función ‘translate()’
La función translate() es una abreviatura (shorthand) de las dos funciones que permiten indicar el desplazamiento en los ejes horizontal (X) y vertical (Y). Esta función es ideal para resumir código cuando se trabaja en 2D. También debe usarse como valor de la propiedad CSS transform.
Al tratarse de una abreviatura, la función translate() admite dos parámetros. El primero indica el desplazamiento en el eje horizontal, y en el segundo en el eje vertical. Admite valores numéricos de longitud y porcentajes. En el caso de usar un único parámetro, será el horizontal y el otro será de 0 píxeles.
En el siguiente ejemplo vamos a trasladar el elemento hijo 15 píxeles hacia la izquierda y 5 píxeles hacia arriba. Por tanto, usaremos valores negativos en los dos parámetros que representan los dos ejes del plano bidimensional. En esencia, es como indicar coordenadas en un plano cartesiano.
Código CSS:
.trasladar {
transform: translate(-15px, -5px);
}
Resultado:
AR
¿Lo ves? El objeto de color turquesa ahora se ha trasladado hacia la izquierda y hacia arriba, según las dos distancias indicadas en píxeles.
La función ‘translateZ()’
Para poder realizar una traslación en el eje de la profundidad (Z) hay que usar la función translateZ(). Pero para que funcione, hay que usar la propiedad transform-style con el valor preserve-3d, así los elementos hijos del contenedor se posicionarán en un espacio tridimensional.
La función translateZ() admite un parámetro como valor; debe ser un valor numérico en unidades de longitud. Si el valor es positivo, el elemento se acerca hacia el plano del observador, y si es negativo se aleja.
A diferencia de los ejes horizontal (X) y vertical (Y), el eje de la profundidad (Z) no admite valores numéricos en forma de porcentaje.
En este ejemplo alejaremos el cuadrado turquesa habitual la distancia de 1 píxel en el eje Z, por lo que se esconderá detrás del cuadrado naranja del contenedor.
Código CSS:
.contenedor3d {
background: #ff7f2aaa;
border: 1px solid #ff7f2a;
display: inline-block;
height: 40px;
transform-style: preserve-3d;
width: 40px;
}
.trasladarZ {
transform: translateZ(-1px);
}
Resultado:
AR
En el caso de la izquierda, sin traslación, el cuadrado turquesa todavía se ve por delante del cuadrado naranja, mientras que en el caso de la derecha, el cuadrado turquesa está escondido justo detrás del contenedor.
La función ‘translate3d()’
La función translate3d() es una abreviatura (shorthand) de las funciones referentes a los ejes X, Y y Z. Por lo tanto, permite indicar el desplazamiento en un espacio de tres dimensiones. Esta función sintetiza código cuando se trabaja en 3D, y también debe usarse como valor de la propiedad CSS transform.
Para que funcione el eje Z referente a la profundidad, también hay que usar la propiedad transform-style con el valor preserve-3d. De lo contrario, todos los elementos hijos quedaría integrados en un plano bidimensional.
A diferencia de todas las funciones anteriores, translate3d() admite tres parámetros. El primero permite indicar la traslación en horizontal, el segundo en vertical y el tercero en el eje de la profundidad, en ese orden. Los tres ejes admiten valores numéricos, y solo los dos primeros admiten porcentajes.
Si se introduce un único parámetro, se aplicará una traslación en el eje horizontal. Con dos parámetros se estará indicando la traslación en horizontal y en vertical. Y con tres parámetros, el orden es el siguiente: ejes X, Y y Z. Cuando falta uno o dos parámetros, se les aplicará el valor 0 (sin traslación).
Vamos a ver un ejemplo en el que trasladaremos el elemento hijo a través de los tres ejes. Lo vamos a desplazar -15 píxeles hacia la izquierda, 5 píxeles abajo y -1 píxel hacia el fondo, por lo que una parte quedará escondida.
Código CSS:
.trasladar3d {
transform: translate3d(-15px, 5px, -1px);
}
Resultado:
AR
El hecho de que el contenedor de color naranja sea un poco transparente permite visualizar el elemento turquesa que ha quedado medio escondido debido a que se encuentra en un plano de profundidad posterior.
La propiedad ‘translate’
La propiedad CSS translate es muy similar a la función translate3d(), pero con la ventaja de poder usarla como propiedad en vez de ser un valor de la propiedad transform. Por tanto, esta propiedad permite aplicar una traslación a través de los tres ejes del espacio tridimensional.
El valor por defecto de la propiedad translate es none; no se aplica ninguna traslación. Esta propiedad CSS admite uno, dos o tres valores. A continuación se indica las diferentes combinaciones que pueden realizarse.
Un valor: permite realizar el desplazamiento del elemento en el eje horizontal (X). El valor debe ser numérico y debe indicar unidades de longitud.
.un-valor {
translate: 10px;
translate: 2cm;
translate: 3em;
}
Dos valores: permiten indicar el desplazamiento a través de los ejes X e Y de un plano 2D. Los dos valores se separan con un espacio en blanco.
.dos-valores {
translate: 20px -5px;
translate: 4pt 3px;
translate: 8px 50%;
}
Tres valores: permiten desplazar un elemento a través de los tres ejes de un espacio tridimensional (3D): X, Y y Z, en ese orden.
.tres-valores {
translate: 3px 5px 8px;
translate: 0 0 20px;
translate: 2cm 0 4cm;
}
Se puede usar el valor 0 para indicar que no se quiere desplazar o mover el elemento a través de un eje determinado.
En el siguiente ejemplo usamos la propiedad translate para trasladar un elemento 10 píxeles a la derecha, 5 arriba y -1 hacia el fondo.
Código CSS:
.prop-trasladar {
translate: 10px -5px -1px;
}
Resultado:
AR
