Hàm matrix3d() của CSS
- Trang trước Hàm matrix() trong CSS
- Trang tiếp theo Hàm max() trong CSS
- Quay lại lớp trên Sách tham khảo hàm 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() = |
|
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; }
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); }
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
- Trang trước Hàm matrix() trong CSS
- Trang tiếp theo Hàm max() trong CSS
- Quay lại lớp trên Sách tham khảo hàm CSS