Funzione translateY

La funzione translateY imposta lo spostamento di un elemento lungo l'asse Y. Viene utilizzata insieme alla proprietà transform. Come valore accetta qualsiasi unità di misura per le dimensioni. Un valore positivo sposta verso il basso, uno negativo verso l'alto.

Sintassi

cssselettore {
  transform: translateY(spostamento);
}

Esempio

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

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

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

Результат:

Esempio

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

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

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

Результат:

Vedi anche