ฟังก์ชัน skewX

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

ไวยากรณ์

cssตัวเลือก {
  transform: skewX(มุม);
}

ตัวอย่าง

ในตัวอย่างนี้ บล็อกจะถูกบิดเบี้ยว 30 องศาไปทางซ้าย:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

ตัวอย่าง

ในตัวอย่างนี้ บล็อกจะถูกบิดเบี้ยว 30 องศาไปทางขวา:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

ดูเพิ่มเติม