Ominaisuus transform-origin
Ominaisuus transform-origin määrittää pisteen,
johon nähden elementin muunnokset tapahtuvat,
jotka määritetään ominaisuudella transform.
Oletusarvoisesti tämä piste on elementin keskipiste,
ja esimerkiksi pyöriminen tapahtuu suhteessa
sen keskipisteeseen. Tämä käyttäytyminen voidaan kuitenkin muuttaa
ja saada elementti pyörimään suhteessa
omaan sivuunsa, kulmaan tai jopa pisteeseen,
joka sijaitsee elementin ulkopuolella.
Syntaksi
valitsija {
transform-origin: X-akseli Y-akseli Z-akseli;
}
Y- ja Z-akselien arvot eivät ole pakollisia, ne voidaan jättää pois (ne saavat oletusarvot). Pisteen siirto Z-akselia pitkin tarvitaan 3D-muunnoksia varten.
Arvot X-akselille
| Arvo | Kuvaus |
|---|---|
| CSS-yksiköt | Arvona ovat mitkä tahansa koko-yksiköt, jotka määrittävät muunnoskeskuksen siirtymän elementin vasemmasta reunasta. Positiivinen arvo siirtää muunnoskeskusta oikealle (elementin sisäänpäin), ja negatiivinen arvo - vasemmalle (elementin ulkopuolelle) suhteessa elementin vasempaan reunaan. |
left |
Pyörimispiste vaakasuunnassa elementin vasemmalla reunalla. |
right |
Pyörimispiste vaakasuunnassa elementin oikealla reunalla. |
center |
Pyörimispiste vaakasuunnassa elementin keskipisteessä. |
Oletusarvo: center.
Arvot Y-akselille
| Arvo | Kuvaus |
|---|---|
| CSS-yksiköt | Arvona ovat mitkä tahansa koko-yksiköt, jotka määrittävät muunnoskeskuksen siirtymän elementin yläreunasta. Positiivinen arvo siirtää muunnoskeskusta alaspäin (elementin sisäänpäin), ja negatiivinen arvo - ylöspäin (elementin ulkopuolelle) suhteessa elementin yläreunaan. |
top |
Pyörimispiste pystysuunnassa elementin yläreunalla. |
bottom |
Pyörimispiste pystysuunnassa elementin alareunalla. |
center |
Pyörimispiste pystysuunnassa elementin keskipisteessä. |
Oletusarvo: center.
Arvot Z-akselille
| Arvo | Kuvaus |
|---|---|
| CSS-yksiköt | Arvona ovat mitkä tahansa koko-yksiköt, jotka määrittävät muunnoskeskuksen siirtymän elementin tasosta. Positiivinen arvo siirtää sitä kohti meitä (näytön tason ulkopuolelle), ja negatiivinen arvo pois meistä. |
Oletusarvo: 0px.
Esimerkki
Nyt transform-origin-ominaisuuden arvoa ei ole asetettu ja lohko pyörii suhteessa sen keskipisteeseen. Vie hiiri lohkon päälle nähdäksesi efektin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Esimerkki
Nyt lohko pyörii hiiren ollessa päällä suhteessa vasempaan yläkulmaan:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Esimerkki
Nyt lohko pyörii hiiren ollessa päällä suhteessa
oikeaan alakulmaan. Tätä varten tulee sijoittaa
muunnospiste 100% oikealle
ja 100% alaspäin (voitaisiin määrittää
myös px, mutta elementin koon muuttuessa
muunnospiste pysyisi paikallaan,
joten on parempi tehdä %:lla):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Esimerkki
Pyöritetään lohkoa suhteessa oikeaan yläkulmaan:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Esimerkki
Pyöritetään lohkoa suhteessa vasemman sivun keskipisteeseen.
Tätä varten X-akselille asetetaan left (pyörimispiste
tulee vasemmalle), ja Y-akselille - center
(pyörimispiste tulee pystysuunnassa keskipisteeseen):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Esimerkki
Ominaisuutta voidaan käyttää paitsi pyörimiselle,
myös muille muunnoksille. Suurennetaan
mittakaavaa käyttämällä scale:a ja määritetään muunnospisteeksi
vasen alakulma:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Esimerkki
Nyt määritetään muunnospisteeksi oikea yläkulma:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Esimerkki
Muunnospiste voidaan määrittää myös elementin ulkopuolelle. Seuraavassa esimerkissä hiiren ollessa päällä punaisen lohkon musta lohko suorittaa pyörimisen suhteessa pisteeseen, joka sijaitsee ulkopuolella:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
