Tidadigi Logo

CSS scaleX() Function

Hàm scaleX() là một hàm dựng sẵn để thay đổi kích thước phần tử theo trục x trong mặt phẳng 2D. Nó thay đổi tỷ lệ các phần tử theo hướng ngang.

Cú pháp:

scaleX() = scaleX( number )

Tham số: Hàm này nhận một tham số duy nhất là number. Nó giữ hệ số tỷ lệ dọc theo trục x. Các ví dụ dưới đây minh họa hàm scaleX() trong CSS.

Ví dụ 1:

html 
<!DOCTYPE html> 
<html> 

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

    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .scaleX_image {
            transform: scaleX(2);
        }
    </style> 
</head> 

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

</html>

Đầu ra:

 css-scalex-function 

Ví dụ 2:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS scaleX() function</title> 
    
    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
            transform: scaleX(1.5);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS scaleX() function</h2>

    <div class="GFG">Welcome to GeeksforGeeks</div> 
</body> 

</html>

Đầu ra:

 css-scalex-function 

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ scaleX() Function được liệt kê dưới đây:

  • Google Chrome 1 trở lên
  • Edge 12 trở lên
  • Internet Explorer 9 trở lên
  • Firefox 3.5 trở lên
  • Opera 10.5 trở lên
  • Safari 3.1 trở lên

Last Updated : 21/07/2025