Open In App
Related Articles

Tailwind CSS Rotate

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 rotate an element based on the given angle as an argument. The angle can be set in terms of degrees, radians, or turns. In CSS, we can do that by using the CSS rotate() function.

Rotate classes:

  • rotate-0: This class is for no rotation.
  • rotate-1: This class is used to rotate 1 degree clockwise.
  • rotate-2: This class is used to rotate 2 degrees clockwise.
  • rotate-3: This class is used to rotate 3 degrees clockwise.
  • rotate-6: This class is used to rotate 6 degrees clockwise.
  • rotate-12: This class is used to rotate 12 degrees clockwise.
  • rotate-45: This class is used to rotate 45 degrees clockwise.
  • rotate-90: This class is used to rotate 90 degrees clockwise.
  • rotate-180: This class is used to rotate 180 degrees clockwise.
  • -rotate-1: This class is used to rotate 1 degree anti-clockwise.
  • -rotate-2: This class is used to rotate 2 degrees anti-clockwise.
  • -rotate-3: This class is used to rotate 3 degrees anti-clockwise.
  • -rotate-6: This class is used to rotate 6 degrees anti-clockwise.
  • -rotate-12: This class is used to rotate 12 degrees anti-clockwise.
  • -rotate-45: This class is used to rotate 45 degrees anti-clockwise.
  • -rotate-90: This class is used to rotate 90 degrees anti-clockwise.
  • -rotate-180: This class is used to rotate 180 degrees anti-clockwise.

Syntax:

<element class="rotate-{degree}">...</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 Rotate 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 rotate-0" 
        style= 
        "background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-45" 
        style= 
        "background-image:url( 
    </div>
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-90" 
        style="background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform rotate-180" 
        style="background-image:url( 
    </div>
    </div
</body
</html

                    

Output:



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