CSS translate ominaisuus

edellinen sivu transition-timing-function
Seuraava sivu unicode-bidi

Määrittely ja käyttö

translate Ominaisuus mahdollistaa elementin sijainnin muuttamisen.

translate Ominaisuus määrittelee elementin kaksiulotteisessa tilassa olevat x- ja y-akselin koordinaatit. Voit myös määritellä z-akselin koordinaatit muuttaaksesi sijaintia kolmiulotteisessa tilassa.

Koordinaatit voidaan antaa vain x-akselin koordinaatit, x- ja y-akselin koordinaatit tai x-, y- ja z-akselin koordinaatit.

Jotta ymmärtäisit paremmin translate Ominaisuutta koskevat ohjeet, katso:Demonстраatio.

Vinkki:Jotta z-akselin ominaisuus toimisi, sinun on määritettävä CSS perspective ominaisuuden arvo.

Huomioitavaa:Toinen elementin siirtämisen teknologia on käyttää CSS translate() funktio Tämän sivun CSS transform ominaisuus voidaan sanoa olevan yksinkertaisempi ja suorampi tapa siirtää elementtiä.

Esimerkki

Esimerkki 1

Muuta elementin sijaintia:

div {
  translate: 100px 20px;
}

Kokeile itse

Esimerkki 2

Kun asetetaan z-akseli: translate Ominaisuuden määrittäessä, on se määritettävä myös isäelementille: perspective Ominaisuuden näkemiseksi meidän on määritettävä ominaisuus sekä lapsi- että isäelementille:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Kokeile itse

CSS syntaksi

translate: x-axis y-axis z-axis|initial|inherit;

Ominaisuusarvo

Arvo	Kuvaus
x-axis	Määrittelee sijainnin x-akselilla. Mahdolliset arvot: Pituus Prosentti
y-axis	Määrittelee sijainnin y-akselilla. Mahdolliset arvot: Pituus Prosentti
z-axis	Määrittelee sijainnin z-akselilla. Mahdolliset arvot: Pituus Prosentti
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Tämä ominaisuus peritään vanhemmalta elementiltä. Katso: inherit.