A transform-origin tulajdonság

A transform-origin tulajdonság határozza meg azt a pontot, amelyhez viszonyítva történnek az elem azon transzformációi, amelyeket a transform tulajdonság határoz meg. Alapértelmezetten ez a pont - az elem közepe, és például a forgatás is az elem közepe körül fog történni. Ez a viselkedés azonban megváltoztatható, az elem forgatható saját oldala, sarka körül, vagy akár egy olyan pont körül is, amely az elemen kívül helyezkedik el.

Szintaxis

cssszelektor {
  transform-origin: X-tengely Y-tengely Z-tengely;
}

Az Y és Z tengelyek értékei nem kötelezőek, elhagyhatók (akkor az alapértelmezett értéket veszik fel). A Z tengely mentén történő eltolás a 3D-s transzformációkhoz szükséges.

Értékek az X tengelyhez

Érték	Leírás
CSS egységek	Bármilyen méretegység használható értékként, amely megadja a transzformáció középpontjának eltolását az elem bal szélétől. Pozitív érték jobbra tolja a transzformáció középpontját (az elem belseje felé), negatív érték pedig balra (az elemtől kifelé) az elem bal széléhez képest.
`left`	A forgatás vízszintes pontja az elem bal szélén.
`right`	A forgatás vízszintes pontja az elem jobb szélén.
`center`	A forgatás vízszintes pontja az elem közepén.

Alapértelmezett érték: center.

Értékek az Y tengelyhez

Érték	Leírás
CSS egységek	Bármilyen méretegység használható értékként, amely megadja a transzformáció középpontjának eltolását az elem felső szélétől. Pozitív érték lefelé tolja a transzformáció középpontját (az elem belseje felé), negatív érték pedig felfelé (az elemtől kifelé) az elem felső széléhez képest.
`top`	A forgatás függőleges pontja az elem felső szélén.
`bottom`	A forgatás függőleges pontja az elem alsó szélén.
`center`	A forgatás függőleges pontja az elem közepén.

Alapértelmezett érték: center.

Értékek a Z tengelyhez

Érték	Leírás
CSS egységek	Bármilyen méretegység használható értékként, amely megadja a transzformáció középpontjának eltolását az elem síkjától. Pozitív érték felénk tolja (az képernyő síkjától), negatív érték pedig tőlünk el.

Alapértelmezett érték: 0px.

Példa

Jelenleg a transform-origin tulajdonság értéke nincs beállítva, és a blokk a saját közepe körül fog elfordulni. Húzd az egeret a blokk fölé, hogy lásd a hatást:

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

Результат:

Példa

Most a blokk a bal felső sarka körül fog fordulni az egér rámutatásakor:

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

Результат:

Példa

Most a blokk a jobb alsó sarka körül fog fordulni az egér rámutatásakor. Ehhez a transzformáció középpontját 100% jobbra és 100% lefelé kell eltolni (px-ben is megadható volna, de ha az elem mérete megváltozik, a transzformáció középpontja a helyén maradna, ezért jobb %-ban megadni):

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

Результат:

Példa

Forgassuk el a blokkot a jobb felső sarka körül:

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

Результат:

Példa

Forgassuk el a blokkot a bal oldal közepe körül. Ehhez az X tengelyhez állítsuk be a left értéket (a forgatás pontja bal oldalon lesz), az Y tengelyhez pedig a center értéket (a forgatás pontja függőlegesen középen lesz):

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

Результат:

Példa

A tulajdonság nem csak forgatáshoz használható, hanem más transzformációkhoz is. Növeljük meg a méretet a scale segítségével, a transzformáció középpontját a bal alsó sarokba állítva:

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

Результат:

Példa

Most állítsuk be a transzformáció középpontját a jobb felső sarokba:

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

Результат:

Példa

A transzformáció középpontja megadható az elemen kívül is. A következő példában, ha az egeret a piros blokk fölé visszük, a fekete blokk egy olyan pont körül fog elfordulni, amely kívül helyezkedik el:

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

Результат: