El proceso de diseño de una página web muchas veces implica transformar las propiedades de un elemento para crear variedad y movimiento. En este post, te enseñaremos cómo funciona la propiedad translate de CSS y cómo usarla para poder mover tus elementos a través de tu página web.
¿Qué son las transformaciones en CSS?
Las transformaciones en CSS son un conjunto de propiedades que nos permiten, como su nombre indica, transformar ciertas características de un elemento. De manera general, nos permiten trasladar, rotar, escalar y distorsionar los elementos. Estas transformaciones pueden insertarse junto a transiciones en CSS para crear la ilusión de movimiento en un elemento. A continuación, te presentamos una de las transformaciones más comunes: la propiedad translate de CSS.
¿Cómo funciona la propiedad translate de CSS?
La propiedad translate de CSS nos permite trasladar o desplazar un elemento en sus ejes para darle una nueva posición dentro de nuestra página web. Para utilizar esta propiedad, insertamos el valor que representa cuánto queremos que un elemento se desplace en relación a su posición original, no insertamos una nueva posición. Ten presente que puedes utilizar cualquier unidad de medida de CSS para definir este valor.
Con esta propiedad podemos definir el desplazamiento en cualquiera de los ejes, pero primero deberemos definir una posición en el elemento original. Si no definimos la posición, el navegador definirá la ubicación del elemento de manera automática y esta se usará como referencia.
La propiedad translate de CSS abarca distintas propiedades y cada una nos permite desplazar el elemento de distintas maneras. A continuación, te presentamos las diferentes opciones de esta propiedad.
<translateX>
Esta propiedad nos permite desplazar el elemento en el eje X. Si le damos un valor, por ejemplo, de 50px, le estaremos diciendo al elemento que se desplace 50px a la derecha. Los números negativos harán que el elemento se desplace a la izquierda. Este desplazamiento puede ser necesario si el elemento original tiene una posición distinta a la automática.
<translateY>
Esta propiedad nos permite desplazar el elemento en el eje Y. Entonces, si le damos un valor de 50px, este se desplazará 50px hacia abajo. Al igual que en la propiedad translateX, los valores negativos desplazan el elemento hacia el costado opuesto del eje. En este caso, un valor negativo en la propiedad translateY representa un desplazamiento hacia arriba.
Este desplazamiento no es necesario cuando el posicionamiento es automático, pues el elemento estará alineado a la izquierda y hacia el borde superior.
<translate>
La propiedad translate de CSS nos permite unir los dos ejes anteriores en una sola propiedad. Entonces, podemos darle un valor al translateX y al translateY usando una sola línea de código. Lo que haremos será insertar dos valores, el primero representa el desplazamiento en el eje X y el segundo representa el desplazamiento en el eje Y. Escribiríamos, por ejemplo, la línea de código transform: translate (150px, 50px).
<translateZ>
Esta propiedad nos permite desplazar el elemento en el eje Z, también conocido como la profundidad de la pantalla. En términos sencillos, nos permite llevar el elemento hacia afuera o hacia dentro de la pantalla. Al ser una propiedad que abarca una tercera dimensión, no tendrá efecto en la mayoría de los elementos de una página web.
Ten presente que los valores positivos en la propiedad translateZ representan un movimiento hacia afuera o hacia adelante, mientras que los valores negativos representan un movimiento hacia atrás o hacia la profundidad de la página web.
<translate3d>
Esta propiedad desplaza un elemento en el espacio tridimensional de la página web. Al igual que la propiedad translate, esta transformación une los valores de varias propiedades. La diferencia es que la propiedad translate3d incorpora el eje Z a sus valores. Entonces, en esta propiedad escribiremos tres valores o coordenadas, cada una representa el desplazamiento en un eje. Si escribimos, por ejemplo, transform: translate3d (40px, 63px, -130px) estamos diciendo que el elemento se moverá 40px en el eje X, 63px en el eje Y y -130px en el eje Z.
Te invitamos a complementar lo aprendido en este post con las distintas demostraciones de cómo funciona la propiedad translate de CSS publicadas por el sitio web CSS Tricks.
Ahora que sabes cómo funciona la propiedad translate de CSS, ¡es el momento de probarla en el diseño de tu propia página web! Aunque puede que eso suene arriesgado, pues todavía queda mucho que aprender, te traemos la solución. Si quieres seguir aprendiendo al tiempo que creas tu propia página web, te invitamos a inscribirte en nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo que necesitas para ser un experto en desarrollo web, además de utilizar estos aprendizajes para crear y diseñar tu propia página web. ¡Inscríbete ya para continuar aprendiendo y convertirte en todo un experto!
