CSS translate() functie

Definitie en gebruik

CSS translate() functie staat u toe om de positie van het element te wijzigen.

translate() functie in transform in de eigenschap gebruikt.

Voorbeeld

Wijzig de positie van het element:

#myDiv1 {
  transform: translate(50px); /* Verplaatst het element 50px langs de x-as en 0px langs de y-as */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Verplaatst het element 50px langs de x-as en 20px langs de y-as */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Verplaatst het element 100px langs de x-as en 30px langs de y-as */
}

Probeer het zelf

CSS syntaxis

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

Optioneel. Definieert de afstand die het element langs de y-as verplaatst, kan een getal of een percentage zijn.

Indien weggelaten, wordt de waarde ingesteld op 0.

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 translateX() functie

Referentie:CSS translateY() functie

Referentie:HTML DOM transform eigenschap