CSS
HTML
COMPONENTS
CODE HUB
CSS Skew Generator
Konfiguráció
Forgassa X
Forgatás Y
Osztály
Előnézet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget cursus felis. Duis sed accumsan tellus, eget cursus nisl.
Kód
Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraCSS Skew Generator
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.
.rotate-element {
transform: rotate(45deg);
}
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.
.rotate-3d-element {
transform: rotateX(45deg);
}
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.
.custom-transform-element {
transform: translateX(50px) rotate(30deg) scale(1.5);
}
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.