CSS transform-origin ominaisuus

Määrittely ja käyttö

transform-origin ominaisuus antaa sinulle mahdollisuuden muuttaa muunnettavan elementin sijaintia.

2D-muunnos-elementit voivat muuttaa elementin x ja y akselit. 3D-muunnos-elementit voivat myös muuttaa sen Z-akselin.

Jotta transform-origin ominaisuuden ymmärtäminen olisi paremmin, katso tämäEsimerkki.

Safari/Chrome käyttäjät: Jotta transform-origin ominaisuuden 3D-muunnoksissa käytettävää ymmärtäminen olisi paremmin, katso tämäEsimerkki.

Huomautus:Tämä ominaisuus täytyy käyttää yhdessä transform ominaisuudet.

Jotta transform ominaisuuden ymmärtäminen olisi paremmin, katso tämäEsimerkki.

Katso myös:

CSS3 -opetus:CSS3 2D muunnos

CSS3 -opetus:CSS3 3D muunnos

HTML DOM -viittausoppas:transform-origin ominaisuus

esimerkki

Aseta pyöritettävän elementin alkupiste sijainti:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Kokeile itse

Sivun alaosassa on lisää esimerkkejä.

CSS-kieli

transform-origin: x-axis y-axis z-axis;

ominaisuuden arvo

arvo kuvaus
x-axis

Määrittelee, missä X-akselilla näkymä asetetaan. Mahdolliset arvot:

  • vasen
  • keski
  • oikea
  • pituus
  • %
y-axis

Määrittelee, missä Y-akselilla näkymä asetetaan. Mahdolliset arvot:

  • ylä
  • keski
  • alapuoli
  • pituus
  • %
z-axis

Määrittelee, missä Z-akselilla näkymä asetetaan. Mahdolliset arvot:

  • pituus

Tekninen yksityiskohta

Oletusarvo: 50% 50% 0
Perinnäisyys: ei
Versio: CSS3
JavaScript-käyttöä: objekti.style.transformOrigin="20% 40%"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen, joka tukee tätä ominaisuutta täysin.

Numerot -webkit-、-moz- tai -ms- etuliitteellä olevissa luvuissa viittaavat ensimmäiseen käyttöliittymään.

ominaisuus Chrome IE Firefox Safari Opera
transform-origin
(kaksivaiheinen kieli)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform-origin
(kolmivaiheinen kieli)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-