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

cssselettore {
  transform: translateX(spostamento);
}

Esempio

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

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

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

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

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

Результат:

Vedi anche