คำแนะนำหลักสูตร：

ฟังก์ชัน CSS skewX()

การระบุและวิธีใช้ skewX() CSS

skewX() ฟังก์ชันใช้เพื่อเลื่อนองค์ประกอบตามมุมที่กำหนด transform ใช้ในคุณสมบัติ

คำเตือน：skewX(a) เท่ากับ skew(a, 0)!

ตัวอย่าง

ตัวอย่าง 1

ใช้ skewX() ทางแบบที่กำหนดมุมตามตัว x สำหรับองค์ประกอบ <div> หลายองค์ประกอบ

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ skewX() ทางแบบที่กำหนดมุมตามตัว x สำหรับภาพต่างๆ

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

ทดลองด้วยตัวเอง

CSS การเขียน

skewX(a)

รายละเอียดเทคนิค

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงว่าอุปกรณ์เบราเซอร์แรกที่สนับสนุนฟังก์ชันนี้ให้เต็มที่。

หน้าที่เกี่ยวข้อง

ตัวอย่าง:การปรับเปลี่ยนทาง 2D ของ CSS

อ้างอิง:CSS transform คุณสมบัติ

อ้างอิง:ฟังก์ชัน CSS skew()

อ้างอิง:ฟังก์ชัน CSS skewY()