CSS Transform Generator

How to use the CSS Transform Generator

Set Translate X/Y, Rotate, Scale X/Y and Skew X/Y with the sliders or the number boxes.

For a 3D tilt, give Perspective (3D) a value such as 600px and adjust Rotate X (3D) or Rotate Y (3D).

Choose a transform-origin from the dropdown to change the point the box rotates and scales around.

Compare the transformed box with the dashed outline of its original position in the live preview.

Copy or download the CSS tab, or press Reset to return to the defaults.

A CSS transform generator for 2D and 3D effects

This CSS transform generator writes a transform declaration from sliders for translation, rotation, scaling, skewing and 3D rotation. The preview shows a colored box on top of a dashed outline of its untransformed position, so you can see exactly how far it moved and around which point it turned.

Functions whose value is neutral are left out, and scale is collapsed to scale(1.2) when X and Y match. The default setting is a simple rotate(15deg).

Example

A card tilted in 3D, scaled up 20% and anchored at its top-left corner:

.transformed {
  transform-origin: top left;
  transform: perspective(600px) translate(20px, 0) rotateY(30deg) scale(1.2);
}

The transform-origin line only appears when you choose something other than center, which is the CSS default.

Options explained

Translate X/Y (−150 to 150px) – moves the element without affecting layout; neighbors do not shift.
Rotate (−180 to 180°) – 2D rotation; positive values turn clockwise.
Scale X/Y (0 to 2, step 0.05) – 1 is the original size, 0 collapses the element, and different X and Y values stretch it.
Skew X/Y (−60 to 60°) – slants the element; output as skew(x, y).
Perspective (3D) – distance from the viewer in pixels. Smaller values exaggerate depth; 0 turns it off.
Rotate X/Y (3D) – tilts the element around the horizontal or vertical axis. Without perspective the rotation looks like a flat squash.
transform-origin – nine positions from top left to bottom right.

Why the order of functions matters

Transform functions are not independent settings; they are composed in sequence, each one working in the coordinate system left by the previous one. translate(100px) rotate(45deg) moves the box right and then spins it in place, while rotate(45deg) translate(100px) moves it 100px along a diagonal. The generator uses a fixed, predictable order: perspective, translate, rotate, rotateX, rotateY, scale, skew. perspective() must come first to affect the functions after it, which is why it leads the list.

Tips

perspective() vs the perspective property. The function applies to one element. Setting perspective on a parent gives all children a shared vanishing point, which looks more natural for a group of 3D cards.
Transforms combine by replacing. A hover rule with transform: scale(1.1) discards the element's existing rotation. Repeat the full list in the hover state, or use the individual rotate, scale and translate properties, which stack independently.
Stacking and fixed children. Any transform creates a new stacking context and a containing block for position: fixed descendants.
Animate transforms, not position. Transitions on transform avoid layout recalculation. Plug the value into the CSS animation generator and shape the motion with the cubic-bezier generator. To cut an element into a shape rather than move it, see the CSS clip-path generator.

Privacy

The transform is calculated in your browser as you drag the sliders. No data leaves your device.

Frequently asked questions

Why does my second transform overwrite the first one?

transform is a single property, so a later rule replaces the whole value rather than adding to it. Write all functions in one declaration, or use the separate translate, rotate and scale properties, which are supported in all current browsers and combine with each other.

Does CSS transform affect the layout of other elements?

No. The element keeps its original space in the layout and is only painted in a different position or size. That is why a scaled element can overlap its neighbors and why transforms are cheap to animate.

Why does rotateY look flat without perspective?

Without perspective the browser uses an orthographic projection, so turning an element around the Y axis only makes it narrower. Adding perspective(600px) makes the near edge larger than the far edge, which is what reads as depth.

How do I rotate an element around its corner?

Set transform-origin to the corner, for example top left, before rotating. The origin is the fixed point of the rotation and scaling, so everything else pivots around it.