CSS Transform Generator

The CSS transform property moves, rotates, scales, skews and tilts an element without touching the page layout, which makes it the basis of most hover effects and animations. The order of the functions matters, and the combined effect is hard to picture, so this generator builds the value from separate controls, lets you pick the order and the origin, previews the result against the original box, and gives the single equivalent matrix() or matrix3d().

How to use this tool

1. Set translate, rotate, scale and skew; add rotateX/rotateY and perspective for 3D.
2. Choose the order of the functions and the transform-origin.
3. Compare the blue box with the dashed original in the preview.
4. Copy the CSS, or the matrix if you need one value for scripts or animations.

Formula

translate(e, f) = [1 0 e; 0 1 f] · rotate(θ) = [cos θ −sin θ; sin θ cos θ] · scale(x, y) = [x 0; 0 y] · skew(α, β) = [1 tan α; tan β 1] · M = M₁ × M₂ × … in the written order

matrix(a, b, c, d, e, f) holds the 3 × 3 matrix [a c e; b d f; 0 0 1]. For 3D the tool multiplies 4 × 4 matrices, with perspective(d) putting −1/d in the bottom row. All functions act around the transform-origin.

Example

translate(10px, 20px) rotate(90deg) multiplies [1 0 10; 0 1 20] by [0 −1 0; 1 0 0], giving matrix(0, 1, −1, 0, 10, 20): the element turns a quarter clockwise and moves 10 px right and 20 px down. Writing rotate(90deg) translate(10px) instead gives matrix(0, 1, −1, 0, 0, 10) — the 10 px move now happens along the rotated axis, which points down.