CSS translateY() functie

Definitie en gebruik

CSS translateY() De functie staat u toe om elementen langs de y-as (de verticale richting) te herpositioneren.

translateY() functie in transform wordt gebruikt in de eigenschappen.

Voorbeeld

Herpositioneer verschillende <div>-elementen in de verticale richting:

#myDiv1 {
  transform: translateY(30px); /* Verplaatst het element langs de y-as met 30px */
}
#myDiv2 {
  transform: translateY(50px); /* Verplaatst het element langs de y-as met 50px */
}
#myDiv3 {
  transform: translateY(-10px); /* Verplaatst het element langs de y-as met -10px */
}

Probeer het zelf uit

CSS syntaxis

translateY(y)
Waarde Beschrijving
y Verplicht. Definieert de afstand die een element langs de y-as verplaatst, kan een getal of een percentage zijn.

Technische details

Versie: CSS Transforms Module Level 1

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Gerelateerde pagina's

Handleiding:CSS 2D Transformaties

Referentie:CSS transform eigenschap

Referentie:CSS translate() functie

Referentie:CSS translateX() functie

Referentie:HTML DOM transform eigenschap