Својството 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);
}
:
