Funcția skew
Funcția skew definește înclinarea unui element,
transformându-l astfel dintr-un dreptunghi
într-un paralelogram. Este utilizată împreună
cu proprietatea transform.
Valoarea proprietății este un unghi în orice unitate
de măsură pentru unghiuri. Înclinarea este efectuată în jurul
punctului specificat de proprietatea transform-origin.
Poate accepta unul sau doi parametri, enumerați separati prin virgulă. Dacă există doi parametri - primul parametru definește înclinarea orizontală, iar al doilea - cea verticală. Dacă există un singur parametru - acesta definește înclinarea orizontală (și nu pe ambele dimensiuni). Parametrii pot fi atât pozitivi, cât și negativi.
Sintaxă
selector {
transform: skew(unul sau două unghiuri);
}
Exemplu
În acest exemplu, blocul este înclinat la 30
grade spre stânga:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
În acest exemplu, blocul este înclinat la 30
grade spre dreapta:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
În acest exemplu, blocul este înclinat la 30
grade pe verticală (valoare pozitivă):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
În acest exemplu, blocul este înclinat la 30
grade pe verticală (valoare negativă):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
Definim înclinarea simultan pe axa X și Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
