Συνάρτηση skewX
Η συνάρτηση skewX ορίζει τη λοξότητα ενός στοιχείου
κατά τον άξονα X, μετατρέποντάς το έτσι σε παραλληλόγραμμο.
Χρησιμοποιείται μαζί με την ιδιότητα transform.
Ως τιμή της ιδιότητας χρησιμοποιείται μια γωνία σε οποιεσδήποτε μονάδες
για γωνίες. Η γωνία μπορεί να είναι είτε θετική,
είτε αρνητική. Μια θετική τιμή
προκαλεί λοξότητα προς τα αριστερά, ενώ μια αρνητική - προς τα δεξιά.
Η λοξότητα πραγματοποιείται γύρω από το σημείο που ορίζεται από
την ιδιότητα transform-origin.
Σύνταξη
επιλογέας {
transform: skewX(γωνία);
}
Παράδειγμα
Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30
μοιρών προς τα αριστερά:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Παράδειγμα
Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30
μοιρών προς τα δεξιά:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
: