CSS translateX() toiminto

Määrittely ja käyttö

CSS: translateX() Toiminto mahdollistaa elementin uudelleenlokalisoinnin x-akselin (horisontaalinen) suuntaan.

translateX() Toiminto transform ominaisuuksissa käytetään.

Esimerkki

Uudelleenlokalisoi eri suuntaiset <div>-elementit horisontaalisesti:

#myDiv1 {
  transform: translateX(50px); /* Siirtää elementtiä x-akselin suuntaan 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Siirtää elementtiä x-akselin suuntaan 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Siirtää elementtiä x-akselin suuntaan -10px */
}

Kokeile itse

CSS syntaksi

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

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相关的 sivu

Oppitunti:CSS 2D-muunnokset

Viittaukset:CSS transform ominaisuus

Viittaukset:CSS translate() funktio

Viittaukset:CSS translateY() funktio

Viittaukset:HTML DOM transform ominaisuus