Recomendaciones de curso:

Función CSS translateX()

Definición y uso de CSS translateX() La función permite reubicar los elementos a lo largo del eje x (dirección horizontal).

translateX() La función en transform usado en la propiedad.

Ejemplo

Reubicación de diferentes elementos <div> en dirección horizontal:

#myDiv1 {
  transform: translateX(50px); /* Mueve el elemento 50px a lo largo del eje x */
}
#myDiv2 {
  transform: translateX(100px); /* Mueve el elemento 100px a lo largo del eje x */
}
#myDiv3 {
  transform: translateX(-10px); /* Mueve el elemento 10px a lo largo del eje x */
}

Prueba por tu cuenta

Sintaxis CSS

translateX(x)
Valor Descripción
x Obligatorio. Define la distancia de desplazamiento del elemento a lo largo del eje x, que puede ser un número o un porcentaje.

Detalles técnicos

Versión: Módulo de Transformaciones CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutoriales:Transformaciones 2D de CSS

Referencia:Atributo transform de CSS

Referencia:Función translate() de CSS

Referencia:Función translateY() de CSS

Referencia:Atributo transform del DOM HTML