Свойство 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);
}
:
Пример
А сега при посочване блокът ще се завърти спрямо горния ляв ъгъл:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Пример
А сега при посочване блокът ще се завърти спрямо
долния десен ъгъл. За това трябва да се зададе
точката на трансформация на 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);
}
:
Пример
А сега задаваме точка на трансформация като горния десен ъгъл:
<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);
}
:
