Tidadigi Logo

CSS skew() Function

Hàm skew() là một hàm dựng sẵn dùng để biến đổi một phần tử trong mặt phẳng 2D. Hàm này có tác dụng làm nghiêng phần tử bằng cách kéo hoặc đẩy nó.

Cú pháp:

skew( ax )

hoặc

skew( ax, ay )

Tham số:

  • ax: Tham số này giữ góc đại diện cho trục ngang để làm méo một phần tử.
  • ay: Tham số này giữ góc đại diện cho trục dọc để làm méo một phần tử. Nếu nó không được xác định, nó sẽ mặc định là không. Điều này có nghĩa là hoàn toàn nghiêng theo hướng x.

Các ví dụ dưới đây minh họa hàm skew() trong CSS:

Ví dụ 1:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS skew() function</title> 

    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .skew_image {
            transform-origin: top left;
            transform: skew(30deg, 0);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS skew() function</h2>
    
    <img class="skew_image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Đầu ra:

 css-skew-function 

Ví dụ 2:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS skew() function</title> 

    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
            transform: skew(45deg);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS skew() function</h2>
    
    <div class="GFG">Welcome to GeeksforGeeks</div> 
</body> 

</html>

Đầu ra:

 css-skew-function 

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi hàm skew() được liệt kê dưới đây:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 3.5
  • Safari 3.1
  • Opera 10.5

Last Updated : 21/07/2025