⌘K

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

cssselektor {
  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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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 %): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="hover"></div>
<div id="elem"></div>
css#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);
}

Результат:

BackSvojstvo transformNextFunkcija rotate