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

selector {
	transform: translateX(desplazamiento);
}

Ejemplo

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

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

#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:

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

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

Véase también

la función translate,
que establece el desplazamiento en los ejes X e Y
la función translateY,
que establece el desplazamiento en el eje Y