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

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

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

Результат:

Esempio

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

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

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

Результат:

Vedi anche