Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Biến đổi phần tử bằng ma trận 16 giá trị (matrix3d) với CSS3

Phương thức matrix3d()

matrix3d() định nghĩa biến đổi 3D bằng ma trận 4x4 (16 giá trị). Cho phép kiểm soát chính xác mọi biến đổi: dịch chuyển, xoay, tỷ lệ, méo, phối cảnh.

Cú pháp

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Cấu trúc ma trận 4x4

| a1  b1  c1  d1 |
| a2  b2  c2  d2 |
| a3  b3  c3  d3 |
| a4  b4  c4  d4 |
  • a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3: 12 giá trị đầu đại diện cho biến đổi tuyến tính (xoay, scale, skew) trong không gian 3D.
  • a4, b4, c4: 3 giá trị tiếp theo đại diện cho dịch chuyển (translation) theo trục X, Y, Z.
  • d4: Thường là 1 (hệ tọa độ đồng nhất).

Lưu ý: matrix3d() phức tạp, thường do công cụ tạo tự động. Ít khi viết thủ công. Ưu tiên dùng translate3d, rotate3d, scale3d cho dễ đọc.