ฟังก์ชัน skewY

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

ไวยากรณ์

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม