Open In App
Related Articles

CSS translate() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The translate() function is an inbuilt function which is used to reposition an element in a horizontal and vertical direction. 

Syntax:

translate( tx )

or

translate( tx, ty )

Parameters:

  • tx: This parameter holds the length of translation corresponding to x-axis.
  • ty: This parameter holds the length of translation corresponding to y-axis. If its value is not defined then it takes 0 as default value.

Below examples illustrate the translate() function in CSS: 

Example 1: 

html

<!DOCTYPE html> 
<html
  
<head
    <title>CSS translate() function</title
  
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .translate_image {
            transform: translate(100px, 0);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS translate() function</h2>
      
    <h4>Original Image</h4>
    <img src
        alt="GeeksforGeeks logo">
    <br>
      
    <h4>Translate image</h4>
    <img class="translate_image" src
        alt="GeeksforGeeks logo"
</body
  
</html>

                    

Output:

  

Example 2: 

html

<!DOCTYPE html> 
<html
  
<head
    <title>CSS translate() function</title
  
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
        }
        .geeks {
            transform: translate(100px, 100px);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS translate() 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>

                    

Output:

  

Supported Browsers: The browsers supported by translate() function are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 3.5
  • Safari 3.1
  • Opera 10.5


Last Updated : 07 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads