Funzione CSS translateY()

Definizione e utilizzo

CSS translateY() La funzione permette di ri-posizionare l'elemento lungo l'asse y (direzione verticale).

translateY() La funzione è utilizzata in transform usato nell'attributo.

Esempio

Ri-posiziona diversi elementi <div> in direzione verticale:

#myDiv1 {
  transform: translateY(30px); /* Sposta l'elemento di 30px lungo l'asse y */
}
#myDiv2 {
  transform: translateY(50px); /* Sposta l'elemento di 50px lungo l'asse y */
}
#myDiv3 {
  transform: translateY(-10px); /* Sposta l'elemento di -10px lungo l'asse y */
}

Prova tu stesso

Sintassi CSS

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

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 per la prima volta.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Pagine correlate

Tutorial:Transformazioni 2D CSS

Riferimento:Proprietà CSS transform

Riferimento:Funzione CSS translate()

Riferimento:Funzione CSS translateX()

Riferimento:Proprietà HTML DOM transform