Właściwość transform-origin
Właściwość transform-origin ustawia punkt,
względem którego będą odbywać się transformacje
elementu, ustawiane właściwością transform.
Domyślnie ten punkt to środek elementu,
i, na przykład, obrót będzie odbywał się względem
jego środka. Jednak to zachowanie można zmienić
i zmusić element do obracania się względem
swojego boku, rogu lub w ogóle względem
punktu, który leży poza elementem.
Składnia
selektor {
transform-origin: oś-X oś-Y oś-Z;
}
Wartości wzdłuż osi Y i Z nie są obowiązkowe, można je pominąć (przyjmą wartości domyślne). Przesunięcie punktu wzdłuż osi Z jest potrzebne dla transformacji 3D.
Wartości dla osi X
| Wartość | Opis |
|---|---|
| Jednostki CSS | Wartością są dowolne jednostki dla rozmiarów, które ustawiają odsunięcie środka transformacji od lewej krawędzi elementu. Wartość dodatnia przesuwa środek transformacji w prawo (do wnętrza elementu), a ujemna - w lewo (na zewnątrz od elementu) względem lewej krawędzi elementu. |
left |
Punkt obrotu w poziomie na lewej krawędzi elementu. |
right |
Punkt obrotu w poziomie na prawej krawędzi elementu. |
center |
Punkt obrotu w poziomie w środku elementu. |
Wartość domyślna: center.
Wartości dla osi Y
| Wartość | Opis |
|---|---|
| Jednostki CSS | Wartością są dowolne jednostki dla rozmiarów, które ustawiają odsunięcie środka transformacji od górnej krawędzi elementu. Wartość dodatnia przesuwa środek transformacji w dół (do wnętrza elementu), a ujemna - w górę (na zewnątrz od elementu) względem górnej krawędzi elementu. |
top |
Punkt obrotu w pionie na górnej krawędzi elementu. |
bottom |
Punkt obrotu w pionie na dolnej krawędzi elementu. |
center |
Punkt obrotu w pionie w środku elementu. |
Wartość domyślna: center.
Wartości wzdłuż osi Z
| Wartość | Opis |
|---|---|
| Jednostki CSS | Wartością są dowolne jednostki dla rozmiarów, które ustawiają odsunięcie środka transformacji od płaszczyzny elementu. Wartość dodatnia przesuwa go w naszą stronę (od płaszczyzny ekranu), a ujemna od nas. |
Wartość domyślna: 0px.
Przykład
Teraz wartość właściwości transform-origin nie jest ustawiona i blok obróci się względem swojego środka. Najedź myszką na blok, aby zobaczyć efekt:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Przykład
A teraz po najechaniu blok obróci się względem lewego górnego rogu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Przykład
A teraz po najechaniu blok obróci się względem
prawego dolnego rogu. W tym celu należy odnieść
punkt transformacji o 100% w prawo
i o 100% w dół (można by ustawić
i px, ale przy zmianie rozmiarów elementu
punkt transformacji pozostałby na miejscu,
dlatego lepiej robić w %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Przykład
Obróćmy blok względem prawego górnego rogu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Przykład
Obróćmy blok względem środka lewego boku.
Dla tego dla osi X ustawimy left (punkt
obrotu będzie po lewej), a dla osi Y - center
(punkt obrotu będzie po środku w pionie):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Przykład
Właściwość można ustawiać nie tylko dla obrotu,
ale i dla innych transformacji. Zwiększmy
skalę za pomocą scale, podając punkt
transformacji jako lewy dolny róg:
<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);
}
:
Przykład
A teraz podajmy punktem transformacji jako prawy górny róg:
<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);
}
:
Przykład
Punkt transformacji można ustawiać i poza elementem. W następnym przykładzie po najechaniu myszką na czerwony blok czarny blok wykona obrót względem punktu, który znajduje się na zewnątrz:
<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);
}
:
