Tidadigi Logo

CSS translateZ() function

Hàm translateZ() là một hàm dựng sẵn. Nó dùng để định vị lại phần tử dọc theo trục z trong không gian 3D.

Cú pháp:

translateZ( t )

Tham số: Hàm này chấp nhận một tham số duy nhất là t. Tham số này giữ độ dài dịch chuyển tương ứng với trục z.

Các ví dụ sau minh họa hàm translateZ() trong CSS.

Ví dụ 1:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
      CSS translateZ() function
  </title>
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
        
        .translateZ_image {
            transform: perspective(200px) translateZ(100px);
        }
    </style>
</head>

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

    <h4>Original Image</h4>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
         alt="GeeksforGeeks logo">
    <br>

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

</html>

Đầu ra:

 css-translatez-function 

Ví dụ 2:

html 
<!DOCTYPE html>
<html>

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

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

    <h4>Original Element</h4>
    <div class="GFG">
      Welcome to GeeksforGeeks
  </div>

    <h4>Translated Element</h4>
    <div class="GFG geeks">
      Welcome to GeeksforGeeks
  </div>
</body>

</html>

Đầu ra:

 css-translatez-function 

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

  • Google Chrome 12 trở lên
  • Edge 12 trở lên
  • Internet Explorer 10 trở lên
  • Firefox 10 trở lên
  • Safari 4 trở lên
  • Opera 15 trở lên

Last Updated : 21/07/2025