CSS Skew Generator BÉTA

A CSS-ben a skew transzformációt arra használják, hogy egy HTML-elemet egy vagy több tengely mentén megdöntve torzítsanak ferde megjelenést eredményezve. A ferde transzformációknak két elsődleges típusa van: a skewX és a skewY. Ezek a transzformációk lehetővé teszik a vízszintes és függőleges tengelyek ferdeségének megadására.

A következőkben bemutatjuk, hogyan használhatja a skew transzformációkat a transform tulajdonság részeként:

2D forgatás:

Vízszintes ferdeség (skewX): A skewX függvényt használjuk, ha vízszintes ferdeséget szeretnénk alkalmazni egy elemre. A függvény argumentumként egy szögértéket vesz fel az X tengely mentén történő ferdítés mértékének megadásához.

Ebben a példában a .skew-x-element osztály az X tengely mentén 30 fokkal elferdíti az elemet.

Függőleges ferdeség (skewY):

A függőleges ferdítéshez a skewY függvényt használja. Segítségével megadhatja a ferdeség mértékét az Y tengely mentén.

Ebben az esetben a .skew-y-element osztály 45 fokkal ferdíti el az elemet az Y tengely mentén.

Kombinált ferdeség (mind a skewX, mind a skewY):

A vízszintes és függőleges ferde transzformációkat is kombinálhatja a ferde függvény használatával. Két szögértéket vesz fel argumentumként, egyet a vízszintes és egyet a függőleges ferdeséghez.

Ebben a példában a .combined-skew-element osztály egy 20 fokos vízszintes és egy 15 fokos függőleges ferdeséget kombinál.

A ferde transzformációkat gyakran használják vizuális hatások, ferde szöveg és olyan tervezési elemek létrehozására, amelyek mélységet és perspektívát adnak a weboldalak elrendezéséhez. Ezeket más transzformációkkal, például forgatással, méretezéssel és fordítással kombinálva használhatja összetettebb vizuális hatások eléréséhez.