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

selettore {
	transform: translateY(spostamento);
}

Esempio

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

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

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

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

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

Vedi anche

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