Open In App
Related Articles

Tailwind CSS Translate

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

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to translating elements with transform. In CSS, we have done that by using the CSS translate() function.

Translate Classes:

  • translate-x-{amount}: This class holds the length of translation corresponding to the x-axis.
  • -translate-x-{amount}: This parameter holds the length of translation corresponding to the reverse x-axis.
  • translate-y-{amount}: This parameter holds the length of translation corresponding to the y-axis.
  • -translate-y-{amount}: This parameter holds the length of translation corresponding to the reverse y-axis.

Note: Amount totally depends on your choices, you can set it as full as percentage, or directly put the rem value.

Syntax:

<element class="translate-{axis}-{amount}">...</element>

Example:

HTML

<!DOCTYPE html> 
<html
<head
    <link href
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold"
       GeeksforGeeks 
    </h1
    <b>Tailwind CSS Translate Class</b
    <div class="bg-green-300 
                mx-16
                p-4
                justify-between 
                grid grid-flow-col"> 
    <div class="bg-no-repeat
                w-16 h-16 transform translate-x-16" 
        style= 
        "background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform translate-y-16" 
        style= 
        "background-image:url( 
    </div>
    <div class="bg-no-repeat 
                w-16 h-16 transform -translate-x-16" 
        style="background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform -translate-y-16" 
        style="background-image:url( 
    </div>
    </div
</body
</html

                    

Output:

tailwind CSS translate class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads