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.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
