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