Својство transform-origin
Својство transform-origin задаје тачку,
у односу на коју ће се дешавати трансформације
елемента, задате својством transform.
Подразумевано та тачка је центар елемента,
и, на пример, ротација ће се одвијати у односу на
његов центар. Међутим, ово понашање се може променити
и натерати елемент да се ротира у односу на
своју ивицу, угао или чак у односу на
тачку која се налази изван елемента.
Синтакса
селектор {
transform-origin: X-оса Y-оса Z-оса;
}
Вредности по осама Y и Z нису обавезне, можете их изоставити (преузетће подразумеване вредности). Померање тачке по Z оси потребно је за 3D трансформације.
Вредности за осу X
| Вредност | Опис |
|---|---|
| CSS јединице | Вредношћу служе било које јединице за димензије, које задају одступање центра трансформације од леве ивице елемента. Позитивна вредност помера центар трансформације удесно (унутар елемента), а негативна - улево (напоље од елемента) у односу на леву ивицу елемента. |
left |
Тачка ротације по хоризонтали на левој ивици елемента. |
right |
Тачка ротације по хоризонтали на десној ивици елемента. |
center |
Тачка ротације по хоризонтали у центру елемента. |
Подразумевана вредност: center.
Вредности за осу Y
| Вредност | Опис |
|---|---|
| CSS јединице | Вредношћу служе било које јединице за димензије, које задају одступање центра трансформације од горње ивице елемента. Позитивна вредност помера центар трансформације доле (унутар елемента), а негативна - горе (споља од елемента) у односу на горњу ивицу елемента. |
top |
Тачка ротације по вертикали на горњој ивици елемента. |
bottom |
Тачка ротације по вертикали на доњој ивици елемента. |
center |
Тачка ротације по вертикали у центру елемента. |
Подразумевана вредност: center.
Вредности по оси Z
| Вредност | Опис |
|---|---|
| CSS јединице | Вредношћу служе било које јединице за димензије, које задају одступање центра трансформације од равни елемента. Позитивна вредност га помера ка нама (од равни екрана), а негативна од нас. |
Подразумевана вредност: 0px.
Пример
Тренутно вредност својства transform-origin није задата и блок ће се окренути у односу на свој центар. Превуците мишем преко блока да видите ефекат:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Пример
A сада ће се при преласку мишем блок окренути у односу на горњи леви угао:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Пример
A сада ће се при преласку мишем блок окренути у односу на
десни доњи угао. За то треба одредити
тачку трансформације на 100% удесно
и на 100% доле (могло би се задати
и у px, али при промени димензија елемента
тачка трансформације би остала на месту,
па је боље у %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Пример
Окренимо блок у односу на десни горњи угао:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Пример
Окренимо блок у односу на центар леве стране.
За то за осу X задајмо left (тачка
ротације ће бити лево), а за осу Y - center
(тачка ротације ће бити у центру по вертикали):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Пример
Својство се може задати не само за ротацију,
већ и за друге трансформације. Хајде да увећамо
размер помоћу scale, назначивши тачку
трансформације као леви доњи угао:
<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);
}
:
Пример
A сада означимо тачком трансформације десни горњи угао:
<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);
}
:
Пример
Тачку трансформације можете задати и изван елемента. У следећем примеру при преласку мишем преко црвеног блока црни блок ће извршити ротацију у односу на тачку која се налази споља:
<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);
}
:
