home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ฟังก์ชัน CSS matrix() สำหรับการแปลง 2D แบบเมทริกซ์

ฟังก์ชัน matrix() ใน CSS ใช้สำหรับกำหนดเมทริกซ์การแปลง 2D แบบสม่ำเสมอ (homogeneous 2D transformation matrix) กำหนดการแปลงเชิงเส้นเป็นพารามิเตอร์

ตัวอย่างที่ 1

<!DOCTYPE html> <html> <head> <style> .demo {    transform: matrix(2, 1, -1, 1, 190, 100); } .skew_img {    transform-origin: top right;    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>

ผลลัพธ์

ฟังก์ชัน CSS matrix() สำหรับการแปลง 2D แบบเมทริกซ์

ตัวอย่างที่ 2

<!DOCTYPE html> <html> <head> <style> .demo {    transform: matrix(0.9, 0.8, -0.8, 0.8, 100, -30); } .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>

ผลลัพธ์

ฟังก์ชัน CSS matrix() สำหรับการแปลง 2D แบบเมทริกซ์

ไวยากรณ์ (Syntax)

transform: matrix(a, b, c, d, tx, ty);

คำอธิบายพารามิเตอร์ 6 ค่า

เมทริกซ์ 3x3 แบบ homogeneous coordinates:

| a  c  tx |
| b  d  ty |
| 0  0  1  |
  • a - scale X (การขยาย/ย่อแกน X)
  • b - skew Y (การเงียงแกน Y)
  • c - skew X (การเงียงแกน X)
  • d - scale Y (การขยาย/ย่อแกน Y)
  • tx - translate X (การเลื่อนแกน X)
  • ty - translate Y (การเลื่อนแกน Y)

ความสัมพันธ์กับฟังก์ชันอื่นๆ

/* ทั้ง 3 บรรทัดนี้เทียบเท่ากัน */
transform: rotate(45deg) scale(2) translate(100px, 50px);
transform: matrix(1.414, 1.414, -1.414, 1.414, 100, 50);

หมายเหตุ: matrix() รวม rotate, scale, skew, translate ในฟังก์ชันเดียว เหมาะสำหรับการคำนวณทางคณิตศาสตร์หรือ animation ซับซ้อน