Tidadigi Logo

CSS matrix3d() Function

Hàm matrix3d() là một hàm dựng sẵn dùng để tạo phép biến đổi 3D. Phép biến đổi này được biểu diễn dưới dạng ma trận thuần nhất 4x4.

Cú pháp:

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

Tham số: Hàm này chấp nhận 16 tham số như đã đề cập ở trên. Chúng được mô tả dưới đây:

  • a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: Các tham số này giữ giá trị cho phép biến đổi tuyến tính.
  • a4, b4, c4: Các tham số này dùng để giữ giá trị của phép tịnh tiến.

Ví dụ sau minh họa việc sử dụng hàm matrix3d() trong CSS.

Ví dụ:

html 
<!DOCTYPE html> 
<html> 
<head> 
    <title>
        CSS matrix3d() function
        </title> 
        
    <style> 
        .GFG { 
            transform: matrix3d(
                0.6, 0.1, 0.7, 0,
                -0.5, 0.8, 0.1, 0,
                -0.6, -0.5, 0.5, 0,
                0, 0, 0, 1
            );
            
            font-size:26px;
            font-weight:bold;
            width:250px;
            padding:20px;
            background: green;
            color: white;
            font-family: sans-serif;
        } 
    </style> 
    
</head> 

<body> 
    <center>
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>CSS matrix3d() function</h2> 
        <br><br> 
    
        <div class="GFG">
            Welcome to GeeksforGeeks
        </div> 
    </center>
</body> 

</html>

Đầu ra:

 css-matrix3d-function 

Các trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ hàm matrix3d().

  • Google Chrome 12
  • Edge 12
  • Internet Explorer 10
  • Firefox 10
  • Safari 4
  • Opera 15

Last Updated : 21/07/2025