Tailwind CSS Transform Cheatsheet

Complete reference for scale, rotate, translate, skew, and transform origin utilities.
Hover over elements to see transforms in action.

Quick Navigation

Scale Rotate Translate Skew Transform Origin Combined Examples FAQ

Scale

Scale elements up or down. Hover over each box to see the transform in action.

scale-00

scale-500.5

scale-750.75

scale-900.9

scale-950.95

scale-1001

scale-1051.05

scale-1101.1

scale-1251.25

scale-1501.5

Axis-specific Scale

scale-x-0

scale-x-50

scale-x-100

scale-x-150

scale-y-0

scale-y-50

scale-y-100

scale-y-150

Negative Scale (Flip)

Use negative scale values to flip elements:

Hello

Normal

Hello

-scale-x-100

Hello

-scale-y-100

Rotate

Rotate elements clockwise or counter-clockwise. Hover to see the rotation.

rotate-00deg

rotate-11deg

rotate-22deg

rotate-33deg

rotate-66deg

rotate-1212deg

rotate-4545deg

rotate-9090deg

rotate-180180deg

Negative Rotation (Counter-clockwise)

-rotate-1-1deg

-rotate-2-2deg

-rotate-3-3deg

-rotate-6-6deg

-rotate-12-12deg

-rotate-45-45deg

-rotate-90-90deg

-rotate-180-180deg

Translate

Move elements horizontally or vertically. Hover to see the translation.

Translate X (Horizontal)

translate-x-00px

translate-x-px1px

translate-x-0.50.125rem

translate-x-10.25rem

translate-x-20.5rem

translate-x-41rem

translate-x-82rem

Translate Y (Vertical)

translate-y-00px

translate-y-px1px

translate-y-0.50.125rem

translate-y-10.25rem

translate-y-20.5rem

translate-y-41rem

translate-y-82rem

Percentage-based Translation

Use percentage values to translate relative to the element's own size:

translate-x-1/2translate-x-full-translate-x-1/2-translate-x-full

Tip: Combine -translate-x-1/2 -translate-y-1/2 with absolute positioning for perfect centering.

Skew

Skew elements along the X or Y axis for slanted effects.

Skew X

skew-x-00deg

skew-x-11deg

skew-x-22deg

skew-x-33deg

skew-x-66deg

skew-x-1212deg

Skew Y

skew-y-00deg

skew-y-11deg

skew-y-22deg

skew-y-33deg

skew-y-66deg

skew-y-1212deg

Negative Skew

Use negative values to skew in the opposite direction:

-skew-x-1-skew-x-3-skew-x-6-skew-x-12-skew-y-1-skew-y-3-skew-y-6-skew-y-12

Transform Origin

Set the origin point for transforms. Click a position to see how it affects rotation.

Click to change origin

Preview (hover to rotate)

Red dot shows the origin point

Class	CSS Value
`origin-center`	`transform-origin: center;`
`origin-top`	`transform-origin: top;`
`origin-top-right`	`transform-origin: top right;`
`origin-right`	`transform-origin: right;`
`origin-bottom-right`	`transform-origin: bottom right;`
`origin-bottom`	`transform-origin: bottom;`
`origin-bottom-left`	`transform-origin: bottom left;`
`origin-left`	`transform-origin: left;`
`origin-top-left`	`transform-origin: top left;`

Combining Transforms

Multiple transform classes can be combined for complex effects.

Scale + Rotate

hover:scale-125 hover:rotate-12

Translate + Scale

hover:-translate-y-2 hover:scale-110

Rotate + Skew

hover:rotate-6 hover:skew-x-6

Card Lift Effect

hover:-translate-y-2 hover:shadow-xl

Button Press

active:scale-95

Origin + Rotate

origin-bottom-left hover:rotate-12

Using Transforms with Transitions

Add smooth animations to transforms using transition utilities.

Basic Transition

<div class="transition-transform duration-300
     hover:scale-110">
  Smooth scale on hover
</div>

Custom Easing

<div class="transition-transform duration-500
     ease-out hover:rotate-180">
  Smooth rotation
</div>

Multiple Properties

<div class="transition-all duration-300
     hover:scale-105 hover:shadow-lg">
  Scale + shadow
</div>

Spring Effect

<div class="transition-transform duration-150
     active:scale-95">
  Button press effect
</div>

Frequently Asked Questions

What are Tailwind CSS transforms?

Tailwind CSS transforms are utility classes that let you scale, rotate, translate (move), and skew elements. They map directly to CSS transform properties and can be combined for complex effects.

How do I combine multiple transforms in Tailwind?

Simply add multiple transform classes to an element. For example: 'scale-110 rotate-45 translate-x-4' will scale, rotate, and translate the element simultaneously.

What is transform-origin in Tailwind?

Transform origin sets the point around which transforms are applied. Use origin-* classes like origin-center, origin-top-left, origin-bottom to change the pivot point for rotations and scaling.

How do I animate transforms in Tailwind?

Combine transform classes with transition utilities. For example: 'hover:scale-110 transition-transform duration-300' creates a smooth scale animation on hover.

Inspect transforms on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including transforms. Extract any animation or effect with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →