⌘K

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

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

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);
}

Результат:

Przykład

A teraz po najechaniu blok obróci się względem lewego górnego rogu: 

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);
}

Результат:

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 %): 

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);
}

Результат:

Przykład

Obróćmy blok względem prawego górnego rogu: 

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);
}

Результат:

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): 

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);
}

Результат:

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: 

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);
}

Результат:

Przykład

A teraz podajmy punktem transformacji jako prawy górny róg: 

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);
}

Результат:

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: 

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);
}

Результат:

BackWłaściwość transformNextFunkcja rotate