CSS transform

A CSS transform tulajdonság lehetővé teszi, hogy elemeket elforgassunk, átméretezzünk, elmozdítsunk vagy megdöntsünk. Ezzel dinamikus és látványos hatásokat hozhatunk létre anélkül, hogy az elem tényleges méreteit vagy pozícióját módosítanánk.

Egyszerű példa a transform használatára

Az alábbi példában egy dobozt forgatunk el 45 fokkal hover állapotban. A transition hozzáadásával az elforgatás fokozatosan történik.

A példa bemutatja a rotate() használatát, amely elforgatja az elemet megadott szögben.

A transform főbb függvényei

A transform többféle módon módosíthatja az elemeket: forgatás, nagyítás, elmozdítás és döntés. Ezek kombinálhatók is, hogy összetett hatásokat érjünk el.

Függvény	Leírás
rotate()	Az elemet elforgatja egy adott fokban (pl. rotate(45deg)).
scale()	Az elemet nagyítja vagy kicsinyíti (pl. scale(1.5)).
translate()	Az elemet elmozdítja az X és Y tengely mentén (pl. translate(50px, 20px)).
skew()	Az elemet megdönti az X és Y tengely mentén (pl. skew(20deg, 10deg)).

Tippek a transform használatához

A transform hatékony eszköz az elemek vizuális manipulálására. Íme néhány tanács:

Kombináld a transform-ot transitionnel vagy animációkkal a sima mozgások érdekében.
Használj transform-origin tulajdonságot, hogy meghatározd, honnan történjen az elforgatás vagy skálázás.
Ne feledd, hogy a transform nem befolyásolja az elem körüli layout-ot, csak a vizuális megjelenést.