Funzione translate

La funzione translate imposta lo spostamento di un elemento lungo l'asse X e l'asse Y. Viene utilizzata insieme alla proprietà transform. Come valore della funzione si utilizzano qualsiasi unità di misura.

Può accettare uno o due parametri. Se i parametri sono due, il primo parametro imposta lo spostamento lungo l'asse X, e il secondo lungo l'asse Y. Se il parametro è uno, allora imposta lo spostamento lungo l'asse X.

I valori dei parametri possono essere positivi e negativi. Un valore positivo lungo l'asse X sposta verso destra, uno negativo verso sinistra. Un valore positivo lungo l'asse Y sposta verso il basso, uno negativo verso l'alto.

Sintassi

selettore {
	transform: translate(spostamento asse X, spostamento asse Y);
}

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: translate(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: translate(-30px);
}

Esempio

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

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

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

Vedi anche

la funzione translateX,
che imposta lo spostamento lungo l'asse X
la funzione translateY,
che imposta lo spostamento lungo l'asse Y