Tidadigi Logo

CSS skewY() Function

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

Cú pháp:

skewY( a )

Tham số: Hàm này nhận một tham số duy nhất là a, giữ góc biểu diễn trục dọc.

Các ví dụ dưới đây minh họa cách sử dụng hàm skewY() trong CSS.

Ví dụ 1:

html 
<!DOCTYPE html> 
<html> 

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

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

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS skewY() function</h2>
    <br><br>

    <img class="skewY_image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 
</html>

Đầu ra:

 css-skewy-function 

Ví dụ 2:

html 
<!DOCTYPE html> 
<html> 

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

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

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

</html>

Đầu ra:

 css-skewy-function 

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