Tidadigi Logo

CSS skewX() Function

Hàm skewX() là một hàm dựng sẵn dùng để biến đổi phần tử theo chiều ngang trên mặt phẳng 2D.

Cú pháp:

skewX( a )

Tham số: Hàm này chấp nhận một tham số duy nhất là a. Tham số này giữ góc biểu diễn trục ngang. Các ví dụ sau minh họa hàm skewX() trong CSS:

Ví dụ 1:

html 
<!DOCTYPE html> 
<html> 

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

    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .skewX_image {
            transform: skewX(30deg);
        }
    </style> 
</head> 

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

</html>

Đầu ra:

 css-skewx-function 

Ví dụ 2:

html 
<!DOCTYPE html> 
<html> 

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

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

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

</html>

Đầu ra:

 css-skewx-function 

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ hàm skewX() đượ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