ฟังก์ชัน rotate3d() ใน CSS ใช้สำหรับหมุนองค์ประกอบในพื้นที่ 3 มิติ กำหนดจำนวนและมุมการหมุนเป็นพารามิเตอร์ของ rotate3d()
ตัวอย่างที่ 1: หมุนรอบแกน (1,1,1) 45 องศา
<!DOCTYPE html> <html> <head> <style> .demo { transform: rotate3d(1, 1, 1, 45deg); } .skew_img { transform-origin: left; transform: skew(-0.10turn, 30deg); } </style> </head> <body> <h1>Learn</h1> <img class="demo" 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: หมุนรอบแกน (1,2,0) 30 องศา พร้อมข้อความ
<!DOCTYPE html> <html> <head> <style> .demo { transform: rotate3d(1, 2, 0, 30deg); color: red; font-family: sans-serif; font-size: 30px; } .skew_img { transform-origin: left; transform: skew(-0.10turn, 30deg); } </style> </head> <body> <h1>Learn</h1> <p class="demo">Learn Apache Spark</p> <img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
transform: rotate3d(x, y, z, angle);
คำอธิบายพารามิเตอร์
- x, y, z - เวกเตอร์ทิศทางของแกนหมุน (direction vector) ต้องไม่เป็น (0,0,0)
- angle - มุมการหมุน (deg, grad, rad, turn) ค่าบวก = หมุนตามเข็มนาฬิกา (มองจากปลายเวกเตอร์)
กรณีพิเศษ (เทียบเท่า rotateX, rotateY, rotateZ)
rotate3d(1, 0, 0, a) ≡ rotateX(a) rotate3d(0, 1, 0, a) ≡ rotateY(a) rotate3d(0, 0, 1, a) ≡ rotateZ(a) ≡ rotate(a)
การใช้งานจริง
- การ์ดพลิก 3D (card flip)
- Carousel 3 มิติ
- ปุ่ม/ไอคอนที่หมุน 3D เมื่อ hover
- Animation โลโก้หรือผลิตภัณฑ์
หมายเหตุ: ต้องมี transform-style: preserve-3d บนพ่อ ถ้ามีลูกหลายชั้นที่ต้องการ 3D จริง
