ฟังก์ชัน skew() ใช้สำหรับเงียงองค์ประกอบในพื้นที่ 2 มิติ กำหนดจำนวนองศาการเงียงเป็นพารามิเตอร์ของฟังก์ชัน skew()
ตัวอย่างที่ 1: เงียง 45 องศาแกน X
<!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(50px, 10%); } .skew_img { transform-origin: top left; transform: skew(45deg, 0); } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy"> <img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ใช้หน่วย turn และ deg ผสมกัน
<!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(50px, 10%); } .skew_img { transform-origin: top left; transform: skew(-0.06turn, 18deg); } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy"> <img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
transform: skew(ax, ay);
คำอธิบาย
- ax - มุมเงียงแกน X (แนวนอน) - บังคับ
- ay - มุมเงียงแกน Y (แนวตั้ง) - ไม่บังคับ ค่าเริ่มต้น 0
หน่วยที่ใช้ได้
- deg - องศา (360deg = 1 รอบ)
- grad - กราด (400grad = 1 รอบ)
- rad - เรเดียน (2π rad = 1 รอบ)
- turn - รอบ (1turn = 1 รอบ)
หมายเหตุ: ใช้ transform-origin เพื่อเปลี่ยนจุดศูนย์กลางการเปลี่ยนรูป ค่าเริ่มต้นคือ center center
