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
selektor {
transform: skew(jeden lub dwa kąty);
}
Przykład
W tym przykładzie blok jest pochylony o 30
stopni w lewo:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
