In Tailwind CSS, you can rotate an element by using rotate-{value} utility classes. At the time of writing, there are nine preset utility classes:
- rotate-0
- rotate-1
- rotate-2
- rotate-3
- rotate-6
- rotate-12
- rotate-45
- rotate-90
- rotate-180
However, you can rotate an element to an arbitrary angle by enclosing your value in square brackets, like this:
<div class="rotate-[35deg]"></div>To remove the rotation, you can use the transform-none class. For more clarity, see the example below.
Example
This example rotates some elements, including boxes, text, and an image. When you hover an element, its rotation will go away.
Preview:
The code:
<body class="flex flex-wrap space-x-10 spacey-5 p-20 bg-green-200">
<div class="rotate-45 w-48 h-32 bg-amber-600 hover:transform-none"></div>
<img class="rotate-12 w-72 object-cover drop-shadow-md hover:transform-none"
src="https://www.kindacode.com/wp-content/uploads/2022/06/cute-dog.jpeg" />
<h3 class="rotate-6 text-4xl hover:transform-none">Hello There</h3>
<div class="rotate-[13deg] m-10 p-20 bg-purple-700 hover:transform-none">
<h1 class="rotate-[39deg] text-4xl text-white italic hover:transofrm-none">KindaCode.com</h1>
</div>
</body>The cute dog image in the example above is from Pixabay, used under Pixabay’s license.
Further reading:
- Tailwind CSS: Use a Checkbox to Show/Hide an Element
- Tailwind CSS: Create a horizontal line with text in the middle
- Tailwind CSS: Custom Checkboxes and Radio Buttons
- first-of-type and last-of-type in Tailwind CSS
- Tailwind CSS: How to use calc() function
- How to Create a Fixed Sidebar with Tailwind CSS
You can also check out our CSS category page for the latest tutorials and examples.
