ฟังก์ชัน matrix3d() ใน CSS ใช้กำหนดเมทริกซ์การแปลง 4x4 แบบ homogeneous สำหรับการแปลง 3D (3D transformation matrix)
ตัวอย่างที่ 1
<!DOCTYPE html> <html> <head> <style> .demo_img { transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1); } </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark</p> <img class="demo_img" src= "https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark"> </body> </html>
ตัวอย่างที่ 2
<!DOCTYPE html> <html> <head> <style> .demo_img { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,50,-100,0,1.1); </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark</p> <img class="demo_img" src= "https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark"> </body> </html>
คำอธิบาย
matrix3d() รับ 16 ค่า (4x4 matrix) จัดเรียงแบบ column-major order:
matrix3d( m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 )
ความหมายของแต่ละค่า:
- m11, m22, m33 - สเกล (scale) แกน X, Y, Z
- m12, m13, m21, m23, m31, m32 - ก้าวกวาด (skew) และหมุน (rotate)
- m14, m24, m34 - มุมมอง (perspective)
- m41, m42, m43 - การเลื่อน (translate) แกน X, Y, Z
- m44 - สเกลโดยรวม (ปกติ = 1)
ตัวอย่างที่ 1 วิเคราะห์:
matrix3d(1,1,0,0, 0,1,0,0, 0,0,1,0, 1,100,0,1)
- m12=1: skew X ตาม Y
- m41=1: translateX(1px)
- m42=100: translateY(100px)
เคล็ดลับ:
ไม่จำเป็นต้องจดเมทริกซ์ ใช้ transform: translate() rotate() scale() แยกกัน แล้วเบราว์เซอร์จะคำนวณเมทริกซ์ให้เอง matrix3d ใช้เมื่อต้องการควบคุมระดับต่ำหรือ interpolation ที่ซับซ้อน
