CSS Transform Generator for Rotate, Scale, Translate and Skew

Drag six sliders to rotate, scale, move and slant a box, then copy a single transform declaration that lists only the functions you changed.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Preview

CSS

.element {
  transform: rotate(-8deg) skew(-6deg, 0deg);
  transform-origin: center;
  transition: transform 250ms ease;
}

Values

transform: rotate(-8deg) skew(-6deg, 0deg)
Functions: 2

Quick answers

How do I combine rotate and scale in one CSS transform?: List both functions in a single declaration, separated by a space: transform: rotate(-3deg) scale(1.1). Writing two separate transform declarations does not combine them; the second replaces the first.
Does the order of transform functions matter?: Yes. Each function works in the coordinate system left by the one before it. translate(100px, 0px) rotate(45deg) moves the element right and then spins it in place; rotate(45deg) translate(100px, 0px) spins the axes first, so the element travels diagonally.
How do I rotate an element 45 degrees in CSS?: Use transform: rotate(45deg). Positive angles turn clockwise and negative angles turn anticlockwise. The element turns around its transform-origin, which is its center unless you change it.
Does transform change the page layout?: No. A transformed element still occupies its original box in the layout, so neighbors do not move when it is scaled, rotated or translated. It can visually overlap them, and a large scale can cause scrollbars on the page.
What is the difference between translate and position offsets?: translate moves the painted element without recalculating layout, which browsers can animate cheaply. Changing top, left or margin triggers layout on each frame. For motion, translate is usually the smoother choice.

What CSS Transform Generator does

The transform property takes a list of functions and applies them together, and this generator writes that list for you. Rotate runs from -180 to 180 degrees, Scale from 0.2 to 2, Translate X and Translate Y from -100 to 100 pixels, and Skew X and Skew Y from -60 to 60 degrees. Functions are always written in the order translate, rotate, scale, skew, and any control left at its neutral value is dropped from the output; with everything neutral the result is transform: none. The copied rule also sets transform-origin: center and a 250ms transition. It covers 2D transforms only, so there is no rotateX, perspective or matrix output.

What each control adds to the transform

Function text in the last column is what the generator writes; a slider at its neutral value writes nothing.

Control	Range	Neutral value	Output when changed
Translate X / Translate Y	-100 to 100 px, step 1	0 and 0	translate(40px, 0px)
Rotate	-180 to 180 deg, step 1	0	rotate(45deg)
Scale	0.2 to 2, step 0.05	1	scale(1.5)
Skew X / Skew Y	-60 to 60 deg, step 1	0 and 0	skew(-12deg, 0deg)

The two translate values share one function, as do the two skew values, so changing either axis writes both.

Transform examples with the generated CSS

Each result is the transform line the tool produced for those slider positions. Sliders not mentioned were set to their neutral value.

Starting values when the page loads

Rotate -8, Skew X -6, everything else neutral

transform: rotate(-8deg) skew(-6deg, 0deg);

Functions: 2.

Card hover lift

Translate Y -4, Scale 1.05

transform: translate(0px, -4px) scale(1.05);

Put this in a :hover rule and keep the transition line on the base rule so it eases both ways.

Button press

Scale 0.95

transform: scale(0.95);

Flip a chevron for an open accordion

Rotate 180

transform: rotate(180deg);

Slanted label or banner

Skew X -12

transform: skew(-12deg, 0deg);

Apply the opposite skew to the text inside if it should stay upright.

Tilted, enlarged photo

Rotate -3, Scale 1.1

transform: rotate(-3deg) scale(1.1);

All four functions at once

Translate X 50, Translate Y -20, Rotate 90, Scale 1.2, Skew Y 5

transform: translate(50px, -20px) rotate(90deg) scale(1.2) skew(0deg, 5deg);

Functions: 4.

Why transform order changes the result

A transform list is read left to right, and every function changes the coordinate system that the next one uses. Translate first and rotate second, and the element slides along the page's own axes before turning on the spot. Rotate first and translate second, and the x axis has already been turned, so the same 100px move now runs along the rotated direction.

Scale behaves the same way. In scale(2) translate(50px, 0px) the move is doubled to 100 screen pixels because it happens inside the scaled space, while translate(50px, 0px) scale(2) moves exactly 50 pixels and then enlarges.

This generator always writes translate, then rotate, then scale, then skew. With that order the translate values are plain screen pixels and the element turns and grows around its own center, which is what most people expect from the sliders. If you need a different order, copy the functions and rearrange them by hand; the tool has no reorder control.

2D transform functions and what they take

Function	Arguments	Effect	In this generator
translate(x, y)	Lengths or percentages	Moves the element; percentages refer to its own size	Yes, in px
translateX(x) / translateY(y)	One length	Moves along one axis	Written as translate(x, y)
rotate(angle)	deg, rad, grad or turn	Turns around the origin; 1turn equals 360deg	Yes, in deg
scale(n)	One or two numbers	Resizes; one number applies to both axes	Yes, single number
scaleX(n) / scaleY(n)	One number	Resizes one axis; -1 mirrors it	No
skew(x, y)	One or two angles	Slants along the x and y axes	Yes, in deg
matrix(a, b, c, d, tx, ty)	Six numbers	Any 2D transform as one matrix	No

Limits of this generator

2D only. There is no rotateX, rotateY, translateZ, perspective or backface control.
transform-origin is always written as center. Edit that line yourself to pivot from a corner, for example transform-origin: top left.
Scale is uniform. For a horizontal flip or a stretch on one axis, write scaleX(-1) or scale(1.2, 1) by hand.
Translate is in pixels. Percent values, such as the translate(-50%, -50%) centering pattern, are not offered.
The transition line is fixed at transform 250ms ease. Change the duration or timing function after copying.
The selector is always .element. Rename it to match your markup.

Using CSS Transform Generator

1
Drag Rotate to turn the box clockwise (positive degrees) or anticlockwise (negative degrees).
2
Set Scale above 1 to enlarge or below 1 to shrink. The value applies to both axes equally.
3
Use Translate X and Translate Y to move the box in pixels. Positive X moves right and positive Y moves down.
4
Adjust Skew X and Skew Y to slant the box. Return a slider to 0 to remove that function from the output.
5
Change Box colour and Corner radius if it helps you read the preview. They style the sample box only and are not part of the copied CSS.
6
Copy or download the CSS panel. The Values panel repeats the transform string and counts how many functions it contains.

Common questions

Why does my transform do nothing on a span or link?

Transforms are ignored on non-replaced inline boxes, which includes a plain span or a. Set display: inline-block, block or make the element a flex or grid item, and the transform will apply.

What does transform-origin do?

It sets the fixed point that rotation, scale and skew work around. The default is the center of the element (50% 50%). With transform-origin: top left, a rotate swings the element from that corner like a hinge instead of spinning it in place.

Why is animating transform smoother than animating width or left?

Changing width, top or left forces the browser to redo layout and repaint on every frame. A transform is applied after painting, at the compositing stage, so the already-drawn element is simply redrawn in a new position or size. Opacity works the same way.

Why did position: fixed stop working inside a transformed element?

Any transform other than none makes the element the containing block for its fixed-position descendants, so they are positioned against it instead of the viewport. It also creates a new stacking context, which can change how z-index behaves inside it.

Can I use the separate rotate, scale and translate properties instead?

Yes. CSS has individual translate, rotate and scale properties, supported in current versions of the major browsers. They can be set and animated independently and are applied in a fixed order (translate, rotate, scale) before anything in transform. There is no individual skew property.

Does scaling an element make its text blurry?

It can. A scaled element may be drawn from an already-rasterized layer, particularly during an animation, so text and thin borders can soften at fractional scales. Keep resting scales modest or size the element with real dimensions when sharpness matters.

How do I undo a transform at a breakpoint or on hover?

Set transform: none in the overriding rule. Because transform is one property, you cannot remove a single function; you restate the whole list without it, for example going from rotate(-3deg) scale(1.1) to rotate(-3deg).