- Instant help with your CSS coding problems

Rotate element with TailwindCSS

Snippet added on Aug 06, 2023 by Mike

Question:

How to rotate element with TailwindCSS?

Answer:

<div class="w-40 h-10 bg-sky-100 hover:rotate-6">Rotate on hover</div>

Description:

You can rotate an element with TailwindCSS using the rotate-{degree} utility class. You can use the predefined values or any custom value with arbitrary values.

To create a nice rollover rotation with a small animation you can use the following code:

<div class="flex">
    <div class="w-40 h-10 bg-sky-100 m-2 hover:rotate-[-6deg] transition-all duration-500">Item 1</div>
    <div class="w-40 h-10 bg-sky-100 m-2 hover:rotate-[-6deg] transition-all duration-500">Item 2</div>
</div>

Where the result is:

Rotate element with TailwindCSS

Reference:

TailwindCSS rotate reference

Share "How to rotate element with TailwindCSS?"

Related snippets:

Tags:

rotate, element, 90, 45 degrees, tailwind

Technical term:

Rotate element with TailwindCSS

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS Center an absolute element in TailwindCSS How to use !important in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Add dots if text is too long Access child elements in TailwindCSS Create a neon effect with TailwindCSS Select the nth child in TailwindCSS Force line break in a long word using CSS Change bullet size in HTML Use emoji instead of list style Select first child in TailwindCSS How to use calc() in TailwindCSS How to use CSS variables in TailwindCSS Create horizontal rule with text using TailwindCSS Write vertical text in HTML Using :not in TailwindCSS

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Check if an array contains a value Extract a substring from a string in PHP Fix the React 18: Hydration failed because the initial UI does not match error Use IF statement in MySQL Toggle word wrap in VS Code Access JavaScript object property with space Check if string contains a specific character using JavaScript Convert string to character array in JavaScript Generate UUID in JavaScript Play video in fullscreen with vanilla JavaScript convert number to string in JavaScript Compare two files in VS Code Get same day in the next week in PHHP Backup MySQL schema only Generate random string with PHP Set X-Content-Type-Options in Apache Get the first Monday of a month in Java Split a string into words

Interesting things

OpanAi's ChatGPT