ფუნქცია 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;
}
:
