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
szelektor {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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:
<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);
}
:
Példa
Most állítsuk be a transzformáció középpontját a jobb felső sarokba:
<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);
}
:
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:
<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);
}
:
