CSS translate() Function

Last Updated : 30 Aug, 2024

The translate() function in CSS is used to reposition elements along the horizontal (x-axis) and vertical (y-axis) directions. As an inbuilt CSS function, translate() allows web developers to create dynamic and responsive layouts by shifting elements precisely within the document flow. Understanding the syntax and parameters of this function is crucial for effectively leveraging its capabilities.

This article provides a guide on using the translate() function, complete with syntax explanations, parameter details, and practical examples. Whether you are aiming to enhance your web design skills or looking to optimize your site for better user experience, mastering the translate() function is essential.

Syntax:

translate( tx )

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= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">
    <br>
    
    <h4>Translate image</h4>
    <img class="translate_image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        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:

The translate() function in CSS is an indispensable tool for web developers aiming to control the positioning of elements with precision. By understanding and utilizing the translate(tx, ty) syntax, developers can create more dynamic and visually appealing web layouts. Incorporating translate() into your CSS toolkit can significantly enhance your ability to create responsive and user-friendly web designs. Experiment with the provided examples to fully grasp its potential and improve your web development projects.

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

CSS translate3d() Function

jit_t

Improve

Article Tags :

CSS translate() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?