CSS Transform Playground

Experiment with CSS transforms on a live box: drag it to translate, spin the handle to rotate, scale and skew it, move the transform-origin and try 3D rotation with perspective. The tool writes only the functions you changed, plus the equivalent matrix().

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Transform Playground

1Drag the box to move it, or use the Translate sliders. Tab to the box and use the arrow keys for keyboard moves.
2Drag the ↻ handle to rotate (or focus it and press the arrow keys), and set scale and skew with the sliders.
3Pick a transform-origin from the 3 × 3 grid or type custom percentages; the red dot shows where it is.
4Tick 3D rotation for rotateX, rotateY and perspective, then copy the CSS — Randomize gives an example to study.

What is the CSS Transform Playground?

transform changes how an element is drawn without affecting the layout around it: translate() moves it, rotate() turns it, scale() resizes it and skew() slants it. Functions are applied from left to right, so translate(50px) rotate(45deg) moves first and then rotates in place, while rotate(45deg) translate(50px) moves along the rotated axis.

Every 2D transform list collapses to one matrix(a, b, c, d, e, f), and 3D ones to matrix3d() with 16 numbers. The playground shows that equivalent so you can see what the browser actually computes. transform-origin sets the fixed point for rotation, scaling and skewing; it defaults to the centre.

Frequently asked questions

Does the order of transform functions matter?

Yes. Each function works in the coordinate system left by the previous one, so rotating before translating moves the element along a rotated direction. This tool writes translate, rotate, scale, skew in that order.

Why use transform instead of top and left to move things?

Transforms don’t trigger layout, and browsers can composite them on the GPU, so animations stay smooth. Changing top or left reflows the page on every frame.

Why doesn’t my 3D rotation look 3D?

Without perspective a 3D rotation is drawn flat and just looks squashed. Add perspective() at the start of the transform, as this tool does, or set perspective on the parent element.

Is the CSS Transform Playground free and private?

Yes. The CSS Transform Playground is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →