Funksioni skew
Funksioni skew përcakton animin e elementit,
duke e shndërruar atë nga një drejtkëndësh
në një paralelogram. Përdoret së bashku
me vetinë transform.
Vlera e vetisë është një kënd në çdo njësi
për kënde. Animi kryhet rreth
pikës, e cila përcaktohet nga vetia transform-origin.
Mund të marrë një ose dy parametra, të listuar nëpërmjet presjes. Nëse parametrat janë dy - i pari parametër përcakton animin horizontal, dhe i dyti - vertikal. Nëse parametri është një - atëherë ai përcakton animin horizontal (dhe jo në të dyja anët). Parametrat mund të jenë si pozitiv, ashtu edhe negativ.
Sintaksa
përzgjedhësi {
transform: skew(një ose dy kënde);
}
Shembull
Në këtë shembull, blloku është animuar 30
gradë majtas:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Në këtë shembull, blloku është animuar 30
gradë djathtas:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Në këtë shembull, blloku është animuar 30
gradë vertikalisht (vlerë pozitive):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Në këtë shembull, blloku është animuar 30
gradë vertikalisht (vlerë negative):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Përcaktojmë animin njëkohësisht përgjatë boshtit X dhe Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
