ฟังก์ชัน skew
ฟังก์ชัน skew กำหนดการเฉียง (บิดเบือน) ขององค์ประกอบ
ซึ่งเปลี่ยนรูปสี่เหลี่ยมผืนผ้าให้เป็นสี่เหลี่ยมด้านขนาน ใช้ร่วมกับ
คุณสมบัติ transform
ค่าของคุณสมบัติคือมุมใน หน่วยใดก็ได้สำหรับมุม
การเฉียงจะเกิดขึ้นรอบ
จุดที่กำหนดโดยคุณสมบัติ transform-origin
สามารถรับพารามิเตอร์หนึ่งหรือสองตัว คั่นด้วย เครื่องหมายจุลภาค หากมีพารามิเตอร์สองตัว - ตัวแรก กำหนดการเฉียงในแนวนอน และตัวที่สอง - ในแนวตั้ง หากมีพารามิเตอร์เดียว - มันจะ กำหนดการเฉียงในแนวนอน (ไม่ใช่ทั้งสอง ทิศทาง) พารามิเตอร์สามารถเป็นค่าบวก หรือลบก็ได้
ไวยากรณ์
selector {
transform: skew(one or two angles);
}
ตัวอย่าง
ในตัวอย่างนี้ บล็อกถูกเฉียง 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;
}
:
