ฟังก์ชัน scale3d() ใช้สำหรับปรับขนาดองค์ประกอบในพื้นที่ 3 มิติ โดยองค์ประกอบจะถูกปรับขนาดตามตัวเลขที่กำหนดเป็นพารามิเตอร์
ตัวอย่าง: การปรับขนาด 3D
<!DOCTYPE html> <html> <head> <style> .scale3d_img { transform: scale3d(0.5, 1, 1.7); } </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark</p> <img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ผลลัพธ์
ตัวอย่าง: ใช้ค่าลบสำหรับการพลิกภาพ
<!DOCTYPE html> <html> <head> <style> .scale3d_img { transform: scale3d(-1.4, 0.4, 0.7); } </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark</p> <img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
transform: scale3d(sx, sy, sz);
คำอธิบายพารามิเตอร์
- sx - ตัวคูณขนาดแกน X (แนวนอน)
- sy - ตัวคูณขนาดแกน Y (แนวตั้ง)
- sz - ตัวคูณขนาดแกน Z (ความลึก)
หมายเหตุ: ค่าติดลบจะทำให้เกิดการพลิกภาพ (mirroring) ในแกนนั้นๆ ค่า 1 คือขนาดเดิม ค่ามากกว่า 1 จะขยายใหญ่ขึ้น ค่าน้อยกว่า 1 จะเล็กลง
