Funzione translate() di CSS

Definizione e uso

CSS translate() La funzione translate() ti permette di modificare la posizione dell'elemento.

translate() La funzione è in transform utilizzato nell'attributo.

Esempio

Modifica la posizione dell'elemento:

#myDiv1 {
  transform: translate(50px); /* Sposta l'elemento di 50px lungo l'asse x e di 0px lungo l'asse y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Sposta l'elemento di 50px lungo l'asse x e di 20px lungo l'asse y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Sposta l'elemento di 100px lungo l'asse x e di 30px lungo l'asse y */
}

Prova personalmente

Sintassi CSS

translate(x, y)
Valore Descrizione
x Obbligatorio. Definisce la distanza di movimento dell'elemento lungo l'asse x, può essere un numero o una percentuale.
y

Opzionale. Definisce la distanza di movimento dell'elemento lungo l'asse y, può essere un numero o una percentuale.

Se omesso, il valore viene impostato a 0.

Dettagli tecnici

Versione: Modulo Transformazioni CSS Livello 1

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Pagine correlate

Guida:Transformazioni 2D CSS

Riferimento:Proprietà CSS transform

Riferimento:Funzione CSS translateX()

Riferimento:Funzione CSS translateY()

Riferimento:Proprietà HTML DOM transform