CSS Translate Generator BÉTA

A CSS-ben a translate transzformációt arra használják, hogy egy HTML-elemet elmozdítsanak vagy eltoljanak az eredeti pozíciójától, mind a 2D-s, mind a 3D-s térben. A translate transzformációt gyakran használják a transform tulajdonság részeként animációk létrehozására, elemek áthelyezésére vagy más dinamikus hatások alkalmazására.

A következőkben bemutatjuk, hogyan használhatjuk a transzformáció translate transzformációját a transform tulajdonságon belül:

2D Fordítás:

Egy elem 2D-s térben történő elfordításához a translate függvényt használja. Egy vagy két hosszértéket vesz fel argumentumként a vízszintes és függőleges transzláció megadásához.

Ebben a példában a .translate-element osztály az elemet 20 pixellel jobbra és 30 pixellel lefelé mozgatja az eredeti pozícióhoz képest.

3D fordítás:

A 3D-s fordításokhoz a translate3d vagy a translateX, translateY és translateZ függvényeket használhatja egy elem 3D-s térben történő fordításához.

Ebben az esetben a .translate-3d-element osztály az elemet 50 pixelrel az X-tengelyen és 100 pixellel a Z-tengelyen átfordítja a 3D térben, miközben az Y-tengelyen történő átfordítás 0 marad.

A translate transzformáció egy hatékony eszköz dinamikus effektek és animációk létrehozásához, amely lehetővé teszi az elemek zökkenőmentes mozgatását a weboldalon. Más transzformációkkal, például forgatással és méretezéssel kombinálva használhatja összetett vizuális hatások eléréséhez.