ฟังก์ชัน skewY
ฟังก์ชัน skewY กำหนดการบิดเบี้ยวขององค์ประกอบ
ตามแกน Y ทำให้องค์ประกอบเปลี่ยนเป็นสี่เหลี่ยมด้านขนาน
ใช้ร่วมกับคุณสมบัติ transform
ค่าของคุณสมบัติคือมุมใน หน่วยใดๆ
สำหรับมุม มุมสามารถเป็นค่าบวกหรือค่าลบก็ได้
ค่าบวกทำให้บิดเบี้ยวขึ้น ค่าลบ - บิดเบี้ยวลง
การบิดเบี้ยวเกิดขึ้นรอบจุดที่กำหนดโดย
คุณสมบัติ transform-origin
ไวยากรณ์
ตัวเลือก {
transform: skewY(มุม);
}
ตัวอย่าง
ในตัวอย่างนี้ บล็อกถูกบิดเบี้ยวขึ้น 30
องศา:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewY(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
ตัวอย่าง
ในตัวอย่างนี้ บล็อกถูกบิดเบี้ยวลง 30
องศา:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewY(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
