Η συνάρτηση skew

Η συνάρτηση skew ορίζει τη λοξότητα ενός στοιχείου, μετατρέποντάς το έτσι από ορθογώνιο σε παραλληλόγραμμο. Χρησιμοποιείται από κοινού με την ιδιότητα transform. Η τιμή της ιδιότητας είναι μια γωνία σε οποιεσδήποτε μονάδες γωνιών. Η λοξότητα πραγματοποιείται γύρω από το σημείο που ορίζεται από την ιδιότητα transform-origin.

Μπορεί να δεχτεί μία ή δύο παραμέτρους, που αναφέρονται διαχωρισμένες με κόμμα. Εάν υπάρχουν δύο παράμετροι - η πρώτη παράμετρος ορίζει τη λοξότητα οριζόντια, και η δεύτερη - κάθετα. Εάν υπάρχει μόνο μία παράμετρος - τότε αυτή ορίζει τη λοξότητα οριζόντια (και όχι και στις δύο πλευρές). Οι παράμετροι μπορεί να είναι είτε θετικές, είτε αρνητικές.

Σύνταξη

cssεπιλογέας {
  transform: skew(μία ή δύο γωνίες);
}

Παράδειγμα

Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30 μοιρών προς τα αριστερά:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Παράδειγμα

Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30 μοιρών προς τα δεξιά:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Παράδειγμα

Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30 μοιρών κάθετα (θετική τιμή):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Παράδειγμα

Σε αυτό το παράδειγμα, το μπλοκ έχει λοξότητα 30 μοιρών κάθετα (αρνητική τιμή):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Παράδειγμα

Ορίζουμε ταυτόχρονη λοξότητα και στον άξονα X και στον Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Δείτε επίσης