TailwindreadyTailwindready
Free tool

Transform Generator

Move the sliders and watch the box rotate, scale, shift and skew. Copy the Tailwind classes, or the raw CSS if you are not using Tailwind.

Box
Transform origin
Tailwind classes (v4)
rotate-12 scale-110
Raw CSS
transform: rotate(12deg) scale(1.1);
transform-origin: center;

Frequently asked questions

How do I rotate an element in Tailwind CSS?

Use rotate-12 for 12 degrees, or a negative value like -rotate-6 to turn the other way. Tailwind v4 accepts any whole number, and older versions use an arbitrary value such as rotate-[17deg].

What does scale-110 mean?

It scales the element to 110% of its size. scale-100 is the normal size, scale-95 shrinks slightly and is common as an active or pressed state.

How does translate relate to Tailwind spacing?

translate-x-4 moves the element by one spacing step times four, which is 16px. This tool uses a spacing class when the pixel value is a multiple of 4 and an arbitrary value like translate-x-[13px] otherwise.

What is transform origin?

It is the point the transform pivots around. By default that is the center. Setting origin-top-left makes a rotation swing from the corner, like a door on a hinge.

Guides that go with this tool

More free Tailwind CSS tools

Animation generatorCustom keyframe animations as a Tailwind v4 theme entry.Tailwind theme generatorBrand colors, fonts, radius and breakpoints as @theme or config.Type scale generatorA modular font size scale as a Tailwind v4 theme override.Hex opacity calculatorAlpha hex codes, RGBA and the Tailwind opacity class.CSS to Tailwind converterPaste CSS and get Tailwind v4 utility classes back.Box shadow generatorLayer shadows visually and copy the Tailwind class.

Browse all 24 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Transition generatorAnimation generatorBrowse components