Svojstvo transform-origin
Svojstvo transform-origin zadaje tačku,
u odnosu na koju će se odvijati transformacije
elementa, zadate svojstvom transform.
Podrazumevano ova tačka je centar elementa,
i, na primer, rotacija će se odvijati u odnosu na
njegov centar. Međutim, ovo ponašanje se može promeniti
i naterati element da se rotira u odnosu na
svoju stranu, ugao ili uopšte u odnosu na
tačku koja leži izvan elementa.
Sintaksa
selektor {
transform-origin: X-osa Y-osa Z-osa;
}
Vrednosti po osama Y i Z nisu obavezne, mogu se izostaviti (preuzeće podrazumevane vrednosti). Pomeranje tačke po Z osi je potrebno za 3D transformacije.
Vrednosti za X osu
| Vrednost | Opis |
|---|---|
| CSS jedinice | Vrednost su bilo koje jedinice za veličine, koje zadaju odstupanje centra transformacije od leve ivice elementa. Pozitivna vrednost pomera centar transformacije udesno (unutra u element), a negativna - ulevo (napolje od elementa) u odnosu na levu ivicu elementa. |
left |
Tačka rotacije po horizontali na levoj ivici elementa. |
right |
Tačka rotacije po horizontali na desnoj ivici elementa. |
center |
Tačka rotacije po horizontali u centru elementa. |
Podrazumevana vrednost: center.
Vrednosti za Y osu
| Vrednost | Opis |
|---|---|
| CSS jedinice | Vrednost su bilo koje jedinice za veličine, koje zadaju odstupanje centra transformacije od gornje ivice elementa. Pozitivna vrednost pomera centar transformacije nadole (unutra u element), a negativna - nagore (spolja od elementa) u odnosu na gornju ivicu elementa. |
top |
Tačka rotacije po vertikali na gornjoj ivici elementa. |
bottom |
Tačka rotacije po vertikali na donjoj ivici elementa. |
center |
Tačka rotacije po vertikali u centru elementa. |
Podrazumevana vrednost: center.
Vrednosti za Z osu
| Vrednost | Opis |
|---|---|
| CSS jedinice | Vrednost su bilo koje jedinice za veličine, koje zadaju odstupanje centra transformacije od ravni elementa. Pozitivna vrednost pomera ga ka nama (od ravni ekrana), a negativna od nas. |
Podrazumevana vrednost: 0px.
Primer
Trenutno vrednost svojstva transform-origin nije zadata i blok će se okrenuti u odnosu na svoj centar. Pređite mišem preko bloka da vidite efekat:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Primer
A sada će se blok pri prelasku okretati u odnosu na gornji levi ugao:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Primer
A sada će se blok pri prelasku okretati u odnosu na
desni donji ugao. Za to treba pomeriti
tačku transformacije za 100% udesno
i za 100% nadole (mogli bi se zadati
i px, ali pri promeni veličina elementa
tačka transformacije bi ostala na mestu,
pa je bolje koristiti %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Primer
Okrenimo blok u odnosu na gornji desni ugao:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Primer
Okrenimo blok u odnosu na centar leve strane.
Za to ćemo za X osu zadati left (tačka
rotacije će biti levo), a za Y osu - center
(tačka rotacije će biti u centru po vertikali):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Primer
Svojstvo se može zadati ne samo za rotaciju,
već i za druge transformacije. Povećaćemo
razmeru pomoću scale, zadavši tačku
transformacije kao levi donji ugao:
<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);
}
:
Primer
A sada ćemo zadati tačkom transformacije desni gornji ugao:
<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);
}
:
Primer
Tačku transformacije možemo zadati i izvan elementa. U sledećem primeru pri prelasku mišem preko crvenog bloka crni blok će izvršiti rotaciju u odnosu na tačku koja se nalazi spolja:
<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);
}
:
