Hàm matrix() trong CSS - Ma trận biến đổi 2D

Hàm matrix() trong CSS được dùng để định nghĩa ma trận biến đổi 2D đồng nhất. Thiết lập biến đổi tuyến tính làm tham số.

Ví dụ 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>Học tập</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>

Kết quả

Ví dụ 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>Học tập</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>

Kết quả

Cú pháp matrix(a, b, c, d, tx, ty):

Tương đương ma trận 3x3:

| a  c  tx |
| b  d  ty |
| 0  0  1  |

• a, d: Scale X, Y
• b, c: Skew X, Y
• tx, ty: Translate X, Y

Gộp nhiều transform (scale, rotate, skew, translate) vào một matrix duy nhất.