Why is translate-x-2 not 2 px in Tailwind?

Tailwind's spacing unit is 0.25 rem, or 4 px at a 16 px root, so translate-x-2 is 8 px. For 2 px the generator writes translate-x-0.5, and for 1 px translate-x-px. A value that is not a whole number of pixels, such as 3.3 px, becomes translate-x-[3.3px], because Tailwind 4 makes a translate-x- class only for multiples of 0.25 units (translate-x-0.3 would produce no CSS).

Does the order of transform functions matter?

Yes. Each function works in the space the previous one left. rotate(45deg) translate(100px) moves the element diagonally along the rotated axis, while translate(100px) rotate(45deg) moves it straight right and then turns it. The generator always writes translate, rotate, scale, skew in that order.

Why does skew write both skewX and skewY?

When either skew is set, the generator writes both: skewX(10deg) skewY(0deg). The shape is the same as skewX(10deg) alone, because skewY(0deg) does nothing, but the line is longer.

How do I add 3D perspective?

Switch on 3D and set perspective above 0. The generator writes perspective(Npx) first, because it affects the functions that follow it, then your rotateX, rotateY, rotateZ and translateZ. With perspective at 0 nothing is written for it. Choose preserve-3d to add transform-style: preserve-3d.

Why is the Tailwind output one bracketed class?

Tailwind has utilities for translate, rotate and scale, but none for skew or the 3D functions that combines with them. When you use skew or any 3D value, the whole transform is written as one arbitrary class in the same order, followed by transform-3d or transform-flat when 3D is on. A transform origin other than the center adds an origin class such as origin-top-left.

What ranges do the controls allow?

Translate -100 to 100 px, rotate -360 to 360 degrees, scale 0.1 to 3, skew -45 to 45 degrees, rotateX, rotateY and rotateZ -180 to 180, translateZ -200 to 200 px and perspective 0 to 1,000 px. A typed value outside its range, or an empty field, gets a message and changes nothing.

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties. How it works

Presets

Translate X (px)0

Translate Y (px)0

Rotate (deg)0°

Scale1

Skew X (deg)0°

Skew Y (deg)0°

About the CSS Transform Generator

Translate X 20 px, rotate 45° and scale 1.2 make transform: translate(20px, 0px) rotate(45deg) scale(1.2); and the Tailwind classes translate-x-5 rotate-45 scale-[1.2]. The CSS output always adds a transform-origin line, 50% 50% until you pick another point, and with 3D on it also writes perspective, rotateX, rotateY, rotateZ, translateZ and transform-style.

Translate in px and the Tailwind class

Translate X	Tailwind class
1 px	translate-x-px
2 px	translate-x-0.5
3 px	translate-x-0.75
4 px	translate-x-1
6 px	translate-x-1.5
8 px	translate-x-2
10 px	translate-x-2.5
12 px	translate-x-3
16 px	translate-x-4
24 px	translate-x-6
32 px	translate-x-8
48 px	translate-x-12
64 px	translate-x-16
100 px	translate-x-25

translate-y classes use the same scale, and a negative value gets a leading minus: -8 px is -translate-x-2.

Rotate and scale in Tailwind

Value	Tailwind class
Rotate 30°	rotate-[30deg]
Rotate 45°	rotate-45
Rotate 90°	rotate-90
Rotate 135°	rotate-[135deg]
Rotate 180°	rotate-180
Rotate 270°	-rotate-90
Rotate 315°	-rotate-45
Scale 0.5	scale-50
Scale 0.75	scale-75
Scale 0.9	scale-90
Scale 1.1	scale-110
Scale 1.25	scale-125
Scale 1.5	scale-150
Scale 1.3	scale-[1.3]
Scale 2	scale-[2]

Values without a named utility are written as arbitrary values in square brackets. A skew or any 3D value turns the whole transform into one class instead.

The seven presets

Preset	transform	Tailwind
Card tilt	perspective(800px) rotateX(10deg) rotateY(-12deg)	[transform:perspective(800px)_rotateX(10deg)_rotateY(-12deg)] transform-flat
Flip Y	perspective(800px) rotateY(180deg)	[transform:perspective(800px)_rotateY(180deg)] transform-flat
Pop	translate(0px, -6px) scale(1.15)	-translate-y-1.5 scale-[1.15]
Isometric	rotateX(55deg) rotateZ(-45deg)	[transform:rotateX(55deg)_rotateZ(-45deg)] transform-3d
Skew card	skewX(-10deg) skewY(0deg)	[transform:skewX(-10deg)_skewY(0deg)]
Rotate 45	rotate(45deg)	rotate-45
Nudge up	translate(0px, -8px)	-translate-y-2

A preset resets every control it does not list and puts the origin back in the center. Isometric uses preserve-3d; its rotateX(55deg) rounds the isometric tilt of 54.7° from the front.

How to use this tool

Start from a preset, such as Card tilt or Pop, or move the sliders or type values: translate X and Y, rotate, scale and skew X and Y.
Switch on 3D for rotateX, rotateY, rotateZ, translateZ, perspective and the transform style. Switch on Origin to pick the transform origin.
Press Animate to swing the box back and forth through the rest position, from the mirror image of your values to your values. Translate X 20 px moves between -20 px and 20 px, scale 1.5 between 0.5 and 1.5.
Choose CSS, Tailwind, SCSS or Variable and copy. SCSS gives one $transform-* variable per control for you to compose; the other three give a ready transform.

Frequently asked questions

Why is translate-x-2 not 2 px in Tailwind?: Tailwind's spacing unit is 0.25 rem, or 4 px at a 16 px root, so translate-x-2 is 8 px. For 2 px the generator writes translate-x-0.5, and for 1 px translate-x-px. A value that is not a whole number of pixels, such as 3.3 px, becomes translate-x-[3.3px], because Tailwind 4 makes a translate-x-<n> class only for multiples of 0.25 units (translate-x-0.3 would produce no CSS).
Does the order of transform functions matter?: Yes. Each function works in the space the previous one left. rotate(45deg) translate(100px) moves the element diagonally along the rotated axis, while translate(100px) rotate(45deg) moves it straight right and then turns it. The generator always writes translate, rotate, scale, skew in that order.
Why does skew write both skewX and skewY?: When either skew is set, the generator writes both: skewX(10deg) skewY(0deg). The shape is the same as skewX(10deg) alone, because skewY(0deg) does nothing, but the line is longer.
How do I add 3D perspective?: Switch on 3D and set perspective above 0. The generator writes perspective(Npx) first, because it affects the functions that follow it, then your rotateX, rotateY, rotateZ and translateZ. With perspective at 0 nothing is written for it. Choose preserve-3d to add transform-style: preserve-3d.
Why is the Tailwind output one bracketed class?: Tailwind has utilities for translate, rotate and scale, but none for skew or the 3D functions that combines with them. When you use skew or any 3D value, the whole transform is written as one arbitrary class in the same order, followed by transform-3d or transform-flat when 3D is on. A transform origin other than the center adds an origin class such as origin-top-left.
What ranges do the controls allow?: Translate -100 to 100 px, rotate -360 to 360 degrees, scale 0.1 to 3, skew -45 to 45 degrees, rotateX, rotateY and rotateZ -180 to 180, translateZ -200 to 200 px and perspective 0 to 1,000 px. A typed value outside its range, or an empty field, gets a message and changes nothing.

Trying a transform before you write it

Typing rotate(12deg) scale(1.05) into a stylesheet and reloading to see how a hover card tilts is slow. Here the preview box moves as you drag translate X and Y, rotate, scale and skew X and Y. 3D transforms adds rotateX, rotateY, rotateZ, translateZ, perspective and the flat or preserve-3d style. Seven presets set every control at once: Card tilt, Flip Y, Pop, Isometric (rotateX(55deg) rotateZ(-45deg)), Skew card, Rotate 45 and Nudge up. Origin opens a 3 × 3 grid, so a door that swings from its left edge is one click on the middle-left point.

Animate is for checking the motion and is not part of the copied code. It swings each value along a sine wave from its mirror image to your setting and back, through the rest position, over the duration you set (0.5 to 5 s): translate X 20 px moves between −20 px and 20 px, and scale 1.5 between 0.5 and 1.5.

How the transform is written

Only the values you changed are written, in this order: perspective first when 3D is on, then translate, rotate, scale, skew, rotateX, rotateY, rotateZ and translateZ. Setting either translate axis writes both, and skew does the same: skew X 10° gives skewX(10deg) skewY(0deg). Translate X 20 px, rotate 45° and scale 1.2 produce

transform: translate(20px, 0px) rotate(45deg) scale(1.2);

What each format adds:

CSS always writes transform-origin as well, 50% 50% until you pick another point, and transform-style when 3D is on.
Variable writes the same values as --transform-value and --transform-origin-value.
SCSS writes one variable per control, such as $transform-tx: 20px; and $transform-r: 45deg;, plus the origin, and leaves composing the transform line to you.
Tailwind uses the spacing scale for translate, so 2 px is translate-x-0.5 and 20 px is translate-x-5, and named classes such as rotate-45 where Tailwind has them.

Fun Fact: CSS also has separate translate, rotate and scale properties. They are always applied in that order, however you write them, and before anything in transform.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.

CSS

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.