ฟังก์ชัน skewX
ฟังก์ชัน skewX กำหนดการบิดเบี้ยว (skew) ขององค์ประกอบ
ตามแกน 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;
}
:
