Funkcija skew

Funkcija skew nustato elemento iškrypimą, taip paverčiant jį iš stačiakampio į lygiagretainį. Naudojama kartu su savybe transform. Savybės reikšmė yra kampas bet kokiame kampų vienetuose. Iškrypimas atliekamas aplink tašką, nustatytą savybe transform-origin.

Gali priimti vieną ar du parametrus, išvardintus per kablelį. Jei parametrų yra du - pirmasis parametras nustato iškrypimą horizontaliai, o antrasis - vertikaliai. Jei parametras yra vienas - tai jis nustato iškrypimą horizontaliai (o ne abiem kryptimis). Parametrai gali būti teigiami arba neigiami.

Sintaksė

cssselektorius {
  transform: skew(vienas ar du kampai);
}

Pavyzdys

Šiame pavyzdyje blokas iškrypimas 30 laipsnių kairėn:

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

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

Результат:

Pavyzdys

Šiame pavyzdyje blokas iškrypimas 30 laipsnių dešinėn:

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

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

Результат:

Pavyzdys

Šiame pavyzdyje blokas iškrypimas 30 laipsnių vertikaliai (teigiama reikšmė):

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

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

Результат:

Pavyzdys

Šiame pavyzdyje blokas iškrypimas 30 laipsnių vertikaliai (neigiama reikšmė):

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

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

Результат:

Pavyzdys

Nustatome iškrypimą vienu metu išilgai X ir Y ašių:

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

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

Результат:

Taip pat žiūrėkite