Funzione translateX

La funzione translateX imposta lo spostamento dell'elemento lungo l'asse X. Viene utilizzata insieme alla proprietà transform. Il valore della proprietà può essere espresso in qualsiasi unità di misura per le dimensioni. Un valore positivo sposta a destra, uno negativo a sinistra.

Sintassi

selettore {
	transform: translateX(spostamento);
}

Esempio

Se si passa il mouse sul blocco, questo si sposterà di 30px verso destra:

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

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

Esempio

Se si passa il mouse sul blocco, questo si sposterà di 30px verso sinistra:

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

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

Vedi anche

la funzione translate,
che imposta lo spostamento lungo gli assi X e Y
la funzione translateY,
che imposta lo spostamento lungo l'asse Y