CSS transform-origin ominaisuus
- edellinen sivu transform
- Seuraava sivu transform-style
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%; }
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:
|
y-axis |
Määrittelee, missä Y-akselilla näkymä asetetaan. Mahdolliset arvot:
|
z-axis |
Määrittelee, missä Z-akselilla näkymä asetetaan. Mahdolliset arvot:
|
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- |
- edellinen sivu transform
- Seuraava sivu transform-style