Tidadigi Logo

CSS scale3d() Function

Hàm scale3d() là một hàm dựng sẵn. Nó được dùng để thay đổi kích thước phần tử trong không gian 3D. Nó điều chỉnh tỷ lệ các phần tử trên các mặt phẳng x, y và z. Cú pháp:

scale3d( sx, sy, sz )

Tham số: Hàm này chấp nhận ba tham số như đã đề cập ở trên, mô tả dưới đây:

  • sx: Nó thay đổi kích thước các phần tử theo chiều ngang.
  • sy: Nó thay đổi kích thước các phần tử theo chiều dọc.
  • sz: Nó thay đổi kích thước thành phần z của vector tỷ lệ.

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

Ví dụ 1: 

html 
 
<!DOCTYPE html>
<html>

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

    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
        
        .scale3d_image {
            transform: scale3d(2, 1, 1);
        }
    </style>
</head>

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

    <br><br>

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

</html>

Đầu ra: css-scale3d-function Ví dụ 2: 

html 
<!DOCTYPE html>
<html>

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

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

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

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

</html>

Đầu ra:

css-scale3d-function

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

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

Last Updated : 21/07/2025