Hàm CSS matrix()

Trang trước Hàm log() trong CSS
Trang tiếp theo Hàm matrix3d() trong CSS
Quay lại層 trên Sách tham khảo hàm CSS

Định nghĩa và cách sử dụng

CSS matrix() Hàm này định nghĩa một biến đổi hai chiều bằng cách sử dụng ma trận chứa sáu giá trị.

matrix() Hàm này chấp nhận sáu tham số, cho phép bạn thực hiện các hoạt động xoay, thu nhỏ, di chuyển và lật nghiêng đối với phần tử.

Các tham số như sau: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

Mô hình

Ví dụ 1

Sử dụng matrix() Định nghĩa biến đổi hai chiều cho một số phần tử <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Thử ngay

Ví dụ 2

Sử dụng matrix() Tạo biến đổi hai chiều cho hình ảnh:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Thử ngay

Cú pháp CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Giá trị	Mô tả
scaleX()	Bắt buộc. Số, dùng để thu nhỏ chiều rộng của phần tử.
skewY()	Bắt buộc. Số (độ), dùng để lật nghiêng theo trục Y.
skewX()	Bắt buộc. Số (độ), dùng để lật nghiêng theo trục X.
scaleY()	Bắt buộc. Số, dùng để thu nhỏ chiều cao của phần tử.
translateX()	Bắt buộc. Số, dùng để di chuyển phần tử theo trục X.
translateY()	Bắt buộc. Số, dùng để di chuyển phần tử theo trục Y.