Función translateX

La función translateX establece el desplazamiento de un elemento en el eje X. Se utiliza junto con la propiedad transform. El valor de la propiedad puede ser cualquier unidad de tamaño. Un valor positivo desplaza hacia la derecha, uno negativo hacia la izquierda.

Sintaxis

cssselector {
  transform: translateX(desplazamiento);
}

Ejemplo

Si pasas el cursor del ratón sobre el bloque, este se desplazará 30px hacia la derecha:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

Ejemplo

Si pasas el cursor del ratón sobre el bloque, este se desplazará 30px hacia la izquierda:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

Véase también