# Tailwind Rotate

In this article, we’ll explore the Tailwind Rotate property and its classes in detail. We’ll cover what it is, how it works, and some examples of how you can use it in your projects.

## What is Tailwind Rotate?

Tailwind Rotate is a property in the Tailwind CSS framework which allow you to rotate an element.

It is part of the Transform class group, which includes other porperties for scaling, translating, and skewing elements.

The Tailwind Rotate class is based on the CSS transform property, which allows you to apply transformations to an element.

The rotate() function is one of the functions that can be used with the transform property to rotate an element.

## Tailwind Rotate Classes

With Tailwind Rotate, you can apply rotations to elements using a range of pre-defined classes. These classes make it easy to apply common rotations to your elements, without having to write any custom CSS.

There are several classes available for rotation in Tailwind, each with a different degree of rotation and direction.

Here are some of them:

 Classes Overview rotate-0 An element’s rotation transformation is reset using this class, effectively returning it to its original orientation. rotate-1 This class is used to rotate an element by 1 degree. rotate-2 In this case, an element is rotated by 2 degrees. rotate-3 Using this class, an element is rotated by 3 degrees. rotate-6 This class specifies the rotation of an element by 6 degrees. rotate-12 An element is rotated by 12 degrees using this class. rotate-45 The rotation of an element is set as 45 degrees using this class. rotate-90 This class is used to rotate an element by 90 degrees. rotate-180 The rotation of an element is defined as 180 degrees. -rotate-180 In this case, an element is rotated by -180 degrees. -rotate-90 This class applies a rotation of -90 degrees to an element. -rotate-45 By using this class, an element is rotated by -45 degrees. -rotate-12 An element is rotated by -12 degrees using this class. -rotate-6 This class is used to rotate an element by -6 degrees. -rotate-3 In this case, an element is rotated by -3 degrees. -rotate-2 Using this class, an element is rotated by -2 degrees. -rotate-1 This class is used to rotate an element by -1 degrees.

### Syntax

`<element class="rotate-90">...</element>`

Tailwind Rotate works by adding a class to an element that applies a rotation transformation.

The class you use will determine the degree of rotation, as well as the direction of rotation.

To use the Tailwind Rotate utility class, you simply add the appropriate class to the element you want to rotate.

The following example makes use of the above classes to demonstrate the rotate utility class in Tailwind:

#### Example:

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="m-3 text-center"> <h1 class="text-gray-700 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Rotate class in Tailwind CSS</p> <p class="text-gray-500 text-sm font-medium">Hover on the images to find out the style applied</p> <div class="bg-gray-300 p-4 justify-between grid grid-cols-3 gap-8 rounded mt-4"> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-0 my-4" title="rotate-0" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-3 my-4" title="rotate-3" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-45 my-4" title="rotate-45" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-180 my-4" title="rotate-180" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform -rotate-6 my-4" title="-rotate-6" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform -rotate-45 my-4" title="-rotate-45" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> </div> </body> </html>
The following examples portrays the implementation of some rotate utility classes in Tailwind:

#### Example:

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="m-3 text-center"> <h1 class="text-gray-700 text-2xl font-semibold"> MrExamples </h1> <p class="font-semibold my-2">Rotate class in Tailwind CSS</p> <p class="text-gray-500 text-sm font-medium">Hover on the images to find out the style applied</p> <div class="bg-gray-300 p-4 justify-between grid grid-cols-3 gap-8 rounded mt-4"> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-2 my-4" title="rotate-2" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-6 my-4" title="rotate-6" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform rotate-90 my-4" title="rotate-90" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform -rotate-90 my-4" title="-rotate-90" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform -rotate-3 my-4" title="-rotate-3" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> <div class="bg-no-repeat bg-cover bg-center w-28 h-28 transform -rotate-1 my-4" title="-rotate-1" style="background-image:url( https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"> </div> </div> </body> </html>

## Tailwind Rotate Benefits

Here are some of the main benefits of using Tailwind Rotate:

### Easy to use

With pre-defined classes, Tailwind Rotate makes it easy to apply rotations to elements without having to write any custom CSS.

This can save you time and effort in your web development projects.

### Adds visual interest

Rotation is a visual effect that can add dynamism and interest to your website or application.

By using Tailwind Rotate, you can make your website more engaging and interactive for your users.

### Customizable

While Tailwind Rotate provides pre-defined classes for rotation, you can also customize the rotation by using custom CSS.

This gives you the flexibility to apply the rotation based on your specific needs.

### Compatible with other Tailwind classes

Tailwind Rotate is part of the Transform class group, which includes other utilities for scaling, translating, and skewing elements.

By using these classes together, you can create complex and dynamic visual effects for your website or application.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!