Tidadigi Logo

CSS translate3d() Function

Hàm translate3d() là một hàm dựng sẵn để định vị lại phần tử trong không gian 3D.

Cú pháp:

translate3d( tx, ty, tz )

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

  • tx: Tham số này giữ độ dài dịch chuyển tương ứng với trục x. Tham số này giữ giá trị dưới dạng số hoặc phần trăm.
  • ty: Tham số này giữ độ dài dịch chuyển tương ứng với trục y. Tham số này giữ giá trị dưới dạng số hoặc phần trăm.
  • tz: Tham số này giữ độ dài dịch chuyển tương ứng với trục z. Tham số này chỉ giữ giá trị dưới dạng số.

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

Ví dụ 1:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
      CSS translate3d() function
  </title>
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
        
        .translate3d_image {
            transform: translate3d(100px, 0, 0);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS translate3d() 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="translate3d_image" 
         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
         alt="GeeksforGeeks logo">
</body>

</html>

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

html 
<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS translate3d() function</title> 
    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
        }
        .geeks {
            transform: translate3d(100px, 20px, 0);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS translate3d() 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-translate3d-function

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

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

Last Updated : 21/07/2025