Lastnost transform-origin
Lastnost transform-origin določa točko,
relativno katere se bodo izvajale transformacije
elementa, določene z lastnostjo transform.
Privzeto je ta točka - središče elementa,
in, na primer, vrtenje se bo izvajalo relativno
njegovega središča. Vendar pa je to vedenje mogoče spremeniti
in povzročiti, da se element vrti relativno
svoje stranice, kota ali celo relativno
točke, ki leži zunaj elementa.
Sintaksa
selektor {
transform-origin: X-os Y-os Z-os;
}
Vrednosti po oseh Y in Z niso obvezne, lahko jih izpustite (prevzeli bodo privzete vrednosti). Premik točke po osi Z je potreben za 3D transformacije.
Vrednosti za os X
| Vrednost | Opis |
|---|---|
| CSS enote | Vrednost so poljubne enote za velikosti, ki določajo odmik središča transformacije od levega roba elementa. Pozitivna vrednost premakne središče transformacije desno (v notranjost elementa), negativna pa - levo (ven iz elementa) relativno levega roba elementa. |
left |
Točka vrtenja po horizontali na levem robu elementa. |
right |
Točka vrtenja po horizontali na desnem robu elementa. |
center |
Točka vrtenja po horizontali v središču elementa. |
Privzeta vrednost: center.
Vrednosti za os Y
| Vrednost | Opis |
|---|---|
| CSS enote | Vrednost so poljubne enote za velikosti, ki določajo odmik središča transformacije od zgornjega roba elementa. Pozitivna vrednost premakne središče transformacije navzdol (v notranjost elementa), negativna pa - navzgor (zunaj elementa) relativno zgornjega roba elementa. |
top |
Točka vrtenja po vertikali na zgornjem robu elementa. |
bottom |
Točka vrtenja po vertikali na spodnjem robu elementa. |
center |
Točka vrtenja po vertikali v središču elementa. |
Privzeta vrednost: center.
Vrednosti po osi Z
| Vrednost | Opis |
|---|---|
| CSS enote | Vrednost so poljubne enote za velikosti, ki določajo odmik središča transformacije od ravnine elementa. Pozitivna vrednost ga premakne proti nam (od ravnine zaslona), negativna pa od nas. |
Privzeta vrednost: 0px.
Primer
Trenutno vrednost lastnosti transform-origin ni nastavljena in blok se bo zavrtel relativno svojega središča. Z miško se pomaknite nad blok, da vidite učinek:
<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
Zdaj pa se bo ob preletu miške blok zavrtel relativno zgornjega levega kota:
<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
Zdaj pa se bo ob preletu miške blok zavrtel relativno
desnega spodnjega kota. Za to je treba nastaviti
transformacijsko točko na 100% desno
in na 100% navzdol (lahko bi določili
tudi px, vendar bi ob spremembi velikosti elementa
transformacijska točka ostala na mestu,
zato je bolje uporabiti %):
<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
Zavrtimo blok relativno desnega zgornjega kota:
<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
Zavrtimo blok relativno središča leve stranice.
Za to za os X določimo left (točka
vrtenja bo na levi), za os Y pa - center
(točka vrtenja bo na sredini 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
Lastnost je mogoče nastaviti ne le za vrtenje,
ampak tudi za druge transformacije. Povečajmo
merilo s pomočjo scale, z določitvijo točke
transformacije kot levega spodnjega kota:
<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
Zdaj pa določimo točko transformacije kot desni zgornji kot:
<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
Transformacijsko točko je mogoče določiti tudi zunaj elementa. V naslednjem primeru se bo ob preletu miške nad rdečim blokom črni blok zavrtel relativno točke, ki se nahaja zunaj:
<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);
}
:
