Tailwind CSS Rotate

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:

Output:

S

skyridetim

Follow

Improve

Article Tags :

• CSS
• Tailwind CSS
• Web Technologies
• Tailwind-Transforms