CSS Transform Generator

A CSS transform generator for 2D and 3D, with origin and matrix output

The CSS Transform Generator builds the transform property with sliders: translate, rotate, scale and skew in 2D, plus rotateX, rotateY, rotateZ, translateZ and perspective in 3D. A dashed ghost stays where the box started, so you always see how far it has moved, turned or stretched.

Unlike most transform tools, it lets you change the order of the functions and tells you live whether the order changes the result. Drag the yellow dot to move the transform-origin, switch to the newer individual translate, rotate and scale properties, and read the exact matrix() or matrix3d() the browser computes. Everything runs locally in your browser.

How to use the CSS Transform Generator

1. Choose 2D or 3D at the top, or start from a preset such as “Pivot on corner” or “3D tilt”.
2. Move the sliders (or type values) for each function. Untick a function to switch it off without losing its values.
3. Use the arrow buttons beside a function to move it earlier or later in the list, and read the note under the list to see how the order changes the result.
4. Drag the yellow origin dot on the preview, or type X and Y percentages, to change the point the box turns and scales around.
5. In 3D, set the perspective distance and choose whether it goes on the parent element or into the transform as perspective().
6. Copy the CSS, or copy the equivalent matrix.

CSS Transform Generator features

Why the order of transform functions matters

CSS multiplies the functions from left to right into one matrix, and that matrix is applied to the box — so the rightmost function acts on the box first. An easier way to think about it: reading left to right, every function moves, turns or stretches the coordinate system that the next function works in.

Take translateX(100px) rotate(90deg): the box moves 100px to the right and then turns on the spot, giving matrix(0, 1, -1, 0, 100, 0). Swap them to rotate(90deg) translateX(100px) and the axes are turned first, so “X” now points down the screen: the box ends up 100px below its start, matrix(0, 1, -1, 0, 0, 100). Rotation and a uniform scale, on the other hand, commute — rotate(45deg) scale(2) equals scale(2) rotate(45deg).

Reading matrix() and matrix3d()

matrix(a, b, c, d, e, f) is the 2D affine matrix with a c e on the first row and b d f on the second. For a rotation by θ and a uniform scale s, a = s·cos θ, b = s·sin θ, c = −s·sin θ and d = s·cos θ; e and f are the translation in pixels. So rotate(45deg) scale(2) becomes matrix(1.4142, 1.4142, -1.4142, 1.4142, 0, 0), because 2 × cos 45° = 1.4142. Skew adds tan of its angles to c (skewX) and b (skewY).

matrix3d() takes all sixteen values of the 4×4 matrix, column by column. A perspective(d) function puts −1/d into the bottom row, which is why perspective(800px) rotateX(60deg) contains −0.0011 (−0.00125 × sin 60°). Matrices are handy for animation libraries and for comparing results, but the readable function list is better for hand-written CSS.

Origin, perspective and the individual properties

• transform-origin is the fixed point of rotation, scaling and skewing; it defaults to 50% 50%. 0% 100% makes a box swing like a door hinged at its bottom-left corner. Translation is not affected by the origin.
• perspective on the parent gives all children one shared vanishing point; the perspective() function gives each element its own and must come first in the list to affect the functions after it. Smaller distances look more dramatic.
• translate, rotate and scale as separate properties are supported in all current browsers. They are always applied in that order and before transform, which lets a hover rule change just scale without repeating the rest.
• Performance: transforms do not trigger layout, so animating them is cheap; respect prefers-reduced-motion for large movements. For a box to transform, see the CSS Border Generator and Box Shadow Generator.