ฟังก์ชัน rotate() ใน CSS ใช้สำหรับหมุน element พารามิเตอร์กำหนดมุมการหมุน สามารถใช้หน่วยองศา (deg), เรเดียน (rad), กราด (grad), หรือ turn ได้
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 { background-color:rgba(108,111,35,0.6); font-size:35px; color:yellow; transform: rotate(45deg); } </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Australian Cricketers</p> </body> </html>
คำอธิบาย
ในตัวอย่าง #demo6 ใช้ transform: rotate(45deg) หมุน element 45 องศา ทิศทางเข็มนาฬิกา ค่าบวก = หมุนตามเข็มนาฬิกา ค่าลบ = หมุนทวนเข็มนาฬิกา
หน่วยมุมที่รองรับ:
deg- องศา (360deg = 1 รอบ)rad- เรเดียน (2π rad = 1 รอบ)grad- กราด (400 grad = 1 รอบ)turn- รอบ (1turn = 1 รอบ)
ฟังก์ชันหมุนอื่นๆ:
rotateX(angle)- หมุนรอบแกน X (3D)rotateY(angle)- หมุนรอบแกน Y (3D)rotateZ(angle)- หมุนรอบแกน Z (เหมือน rotate 2D)rotate3d(x, y, z, angle)- หมุนรอบเวกเตอร์ 3D ที่กำหนดเอง
จุดหมุน (Transform Origin):
ค่าเริ่มต้นหมุนที่จุดกึ่งกลาง (transform-origin: 50% 50%) สามารถเปลี่ยนได้ เช่น transform-origin: top left หรือ transform-origin: 0 0
