A skew függvény

A skew függvény egy elem ferdeségét állítja be, ezzel téglalapból paralelogrammává alakítva azt. A transform tulajdonsággal együtt használható. Az értéke bármilyen szövegységben megadott szög. A ferdesítés a transform-origin tulajdonsággal megadott pont körül történik.

Egy vagy két, vesszővel elválasztott paramétert fogadhat. Ha két paraméter van - az első paraméter a vízszintes, a második a függőleges ferdeséget határozza meg. Ha csak egy paraméter van - akkor az a vízszintes ferdeséget határozza meg (nem mindkét irányt). A paraméterek lehetnek pozitívak vagy negatívak is.

Szintaxis

cssszelektor {
  transform: skew(egy vagy két szög);
}

Példa

Ebben a példában a blokk 30 fokkal balra ferde:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Példa

Ebben a példában a blokk 30 fokkal jobbra ferde:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Példa

Ebben a példában a blokk 30 fokkal függőlegesen ferde (pozitív érték):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Példa

Ebben a példában a blokk 30 fokkal függőlegesen ferde (negatív érték):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Példa

Ferdeség beállítása egyszerre X és Y tengely mentén:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Lásd még