Omadus transform-origin
Omadus transform-origin määrab punkti,
mille suhtes toimuvad elemendi teisendused,
mis on määratud omadusega transform.
Vaikimisi on see punkt - elemendi keskpunkt,
ja näiteks pöörlemine toimub selle keskpunkti
suhtes. Siiski saab seda käitumist muuta
ja panna elementi pöörlema oma külje, nurga
või üldiselt punkti suhtes, mis asub väljaspool elementi.
Süntaks
selektor {
transform-origin: X-telg Y-telg Z-telg;
}
Y- ja Z-telje väärtused pole kohustuslikud, neid võib ära jätta (need võtavad vaikeväärtused). Punkti nihutamine Z-teljel on vajalik 3D-teisenduste jaoks.
Väärtused X-teljel
| Väärtus | Kirjeldus |
|---|---|
| CSS ühikud | Väärtuseks on suvalised suuruseühikud, mis määravad teisenduskeskme kauguse elemendi vasakust äärest. Positiivne väärtus nihutab teisenduskeset paremale (elemendi sissepoole), negatiivne aga vasakule (elemendist väljapoole) vasaku ääre suhtes. |
left |
Pöörlemispunkt horisontaalselt elemendi vasakul äärel. |
right |
Pöörlemispunkt horisontaalselt elemendi paremal äärel. |
center |
Pöörlemispunkt horisontaalselt elemendi keskel. |
Vaikeväärtus: center.
Väärtused Y-teljel
| Väärtus | Kirjeldus |
|---|---|
| CSS ühikud | Väärtuseks on suvalised suuruseühikud, mis määravad teisenduskeskme kauguse elemendi ülemisest äärest. Positiivne väärtus nihutab teisenduskeset alla (elemendi sissepoole), negatiivne aga üles (elemendist väljapoole) ülemise ääre suhtes. |
top |
Pöörlemispunkt vertikaalselt elemendi ülemisel äärel. |
bottom |
Pöörlemispunkt vertikaalselt elemendi alumisel äärel. |
center |
Pöörlemispunkt vertikaalselt elemendi keskel. |
Vaikeväärtus: center.
Väärtused Z-teljel
| Väärtus | Kirjeldus |
|---|---|
| CSS ühikud | Väärtuseks on suvalised suuruseühikud, mis määravad teisenduskeskme kauguse elemendi tasapinnast. Positiivne väärtus nihutab seda meie poole (ekraani tasapinnast eemale), negatiivne meie eemale. |
Vaikeväärtus: 0px.
Näide
Praegu pole omaduse transform-origin väärtust määratud ja plokk pöörleb oma keskpunkti suhtes. Hõljutage kursorit ploki kohal, et näha efekti:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Näide
Nüüd pöörleb plokk hõljutamisel ülemise vasaku nurga suhtes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Näide
Nüüd pöörleb plokk hõljutamisel
alumise parema nurga suhtes. Selleks tuleb nihutada
teisenduspunkti 100% paremale
ja 100% alla (oleks võinud määrata
ka px, kuid elemendi suuruse muutumisel
jääks teisenduspunkt paigale,
seetõttu on parem teha %-ides):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Näide
Pöörame ploki ülemise parema nurga suhtes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Näide
Pöörame ploki vasaku külje keskpunkti suhtes.
Selleks määrame X-teljele left (pöörlemispunkt
on vasakul), ja Y-teljele center
(pöörlemispunkt on vertikaalselt keskel):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Näide
Omadust saab kasutada mitte ainult pöörlemiseks,
vaid ka teiste teisenduste jaoks. Suurendame
mõõtkava kasutades scale, määrates teisenduspunktiks
vasaku alumise nurga:
<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);
}
:
Näide
Nüüd määrame teisenduspunktiks ülemise parema nurga:
<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);
}
:
Näide
Teisenduspunkti saab määrata ka väljaspool elementi. Järgmises näites hõljutamisel punase ploki kohal teeb must plokk pöörde punkti suhtes, mis asub väljaspool:
<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);
}
:
