CSS translate() -funktio

Määrittely ja käyttö

CSS: translate() Funktio mahdollistaa elementin sijainnin muuttamisen.

translate() Funktio transform ominaisuuksissa käytetään.

Esimerkki

Muuta elementin sijaintia:

#myDiv1 {
  transform: translate(50px); /* Siirtää elementtiä 50px x-akselin suuntaan ja 0px y-akselin suuntaan */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Siirtää elementtiä 50px x-akselin suuntaan ja 20px y-akselin suuntaan */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Siirtää elementtiä 100px x-akselin suuntaan ja 30px y-akselin suuntaan */
}

Kokeile itse

CSS syntaksi

translate(x, y)
Arvo Kuvaus
x Välttämätön. Määrittää elementin siirtymisen etäisyys x-akselin suuntaan, voi olla luku tai prosentti.
y

Valinnainen. Määrittää elementin siirtymisen etäisyys y-akselin suuntaan, voi olla luku tai prosentti.

Jos jätetään pois, arvo asetetaan 0.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Liittyvät sivut

Oppitunti:CSS 2D muunnokset

Viittaukset:CSS transform ominaisuus

Viittaukset:CSS translateX() funktio

Viittaukset:CSS translateY() funktio

Viittaukset:HTML DOM transform ominaisuus