Hàm matrix3d() của CSS

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

CSS của matrix3d() Hàm định nghĩa变换 ba chiều bằng cách sử dụng ma trận 4x4 chứa 16 giá trị:

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

Mô hình

Ví dụ 1

Sử dụng matrix3d() Định nghĩa变换 ba chiều cho một phần tử div:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

Thử ngay

Ví dụ 2

Sử dụng matrix3d() Tạo变换 ba chiều cho một phần tử div khác:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

Thử ngay

Cú pháp CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Giá trị Mô tả
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 Bắt buộc. Định nghĩa số của phép biến đổi tuyến tính.
a4 b4 c4 d4 Bắt buộc. Định nghĩa số của phép biến đổi cần áp dụng.

Chi tiết kỹ thuật

Phiên bản: Module Transforms CSS Level 2

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Trang liên quan

Tham khảo:Thuộc tính transform trong CSS

Tham khảo:Hàm matrix() trong CSS

Giáo trình:Chuyển đổi 3D CSS