Funkcja skew

Funkcja skew definiuje pochylenie elementu, przekształcając go tym samym z prostokąta w równoległobok. Używana jest razem z właściwością transform. Wartością właściwości jest kąt w dowolnych jednostkach dla kątów. Pochylenie jest wykonywane wokół punktu, zdefiniowanego przez właściwość transform-origin.

Może przyjmować jeden lub dwa parametry, wymieniane po przecinku. Jeśli parametrów jest dwa - pierwszy parametr definiuje pochylenie w poziomie, a drugi - w pionie. Jeśli parametr jest jeden - to on definiuje pochylenie w poziomie (a nie w obu kierunkach). Parametry mogą być zarówno dodatnie, jak i ujemne.

Składnia

cssselektor {
  transform: skew(jeden lub dwa kąty);
}

Przykład

W tym przykładzie blok jest pochylony o 30 stopni w lewo:

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

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

Результат:

Przykład

W tym przykładzie blok jest pochylony o 30 stopni w prawo:

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

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

Результат:

Przykład

W tym przykładzie blok jest pochylony o 30 stopni w pionie (wartość dodatnia):

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

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

Результат:

Przykład

W tym przykładzie blok jest pochylony o 30 stopni w pionie (wartość ujemna):

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

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

Результат:

Przykład

Definiujemy pochylenie jednocześnie wzdłuż osi X i Y:

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

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

Результат:

Zobacz też