Desplazamiento horizontal con translateX

En este capítulo exploraremos las transformaciones 2D en CSS.

Los desplazamientos suaves, los cambios de escala, las rotaciones y las inclinaciones que antes requerían JavaScript en el navegador ahora se pueden crear con CSS.

Para empezar, veamos el sistema de coordenadas en el que se mueve un objeto:

Su característica principal es que el eje Y apunta hacia abajo. La página comienza en la esquina superior izquierda y crece hacia abajo, así que en CSS el eje vertical del sistema de coordenadas cartesianas tiene el sentido inverso al habitual.

El primer desplazamiento que haremos será horizontal: moveremos objetos hacia la izquierda y hacia la derecha.

Para este y otros tipos de transformación se utiliza la siguiente sintaxis:

transform: función-de-transformación(valor)

El desplazamiento horizontal se realiza con la función translateX. Su valor es numérico y puede expresarse en unidades como px, %, em o in. Por ejemplo, esta transformación mueve el objeto 100 píxeles hacia la derecha por el eje X:

transform: translateX(100px)

Por cierto, ¡te presentamos a nuestro protagonista! Se llama Pendalf el Azul. Vas a guiarlo y a transformar el mundo que lo rodea con sus hechizos. Juntos vivirán una gran aventura…