ฟังก์ชัน skew

ฟังก์ชัน skew กำหนดการเฉียง (บิดเบือน) ขององค์ประกอบ ซึ่งเปลี่ยนรูปสี่เหลี่ยมผืนผ้าให้เป็นสี่เหลี่ยมด้านขนาน ใช้ร่วมกับ คุณสมบัติ transform ค่าของคุณสมบัติคือมุมใน หน่วยใดก็ได้สำหรับมุม การเฉียงจะเกิดขึ้นรอบ จุดที่กำหนดโดยคุณสมบัติ transform-origin

สามารถรับพารามิเตอร์หนึ่งหรือสองตัว คั่นด้วย เครื่องหมายจุลภาค หากมีพารามิเตอร์สองตัว - ตัวแรก กำหนดการเฉียงในแนวนอน และตัวที่สอง - ในแนวตั้ง หากมีพารามิเตอร์เดียว - มันจะ กำหนดการเฉียงในแนวนอน (ไม่ใช่ทั้งสอง ทิศทาง) พารามิเตอร์สามารถเป็นค่าบวก หรือลบก็ได้

ไวยากรณ์

cssselector {
  transform: skew(one or two angles);
}

ตัวอย่าง

ในตัวอย่างนี้ บล็อกถูกเฉียง 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;
}

Результат:

ดูเพิ่มเติม