Contact

Tools  /  CSS  /  CSS Transform Generator

CSS

CSS Transform Generator

Translate (X/Y/Z), rotate (2D or 3D X/Y/Z), independent scaleX/scaleY, skew, perspective, and transform-origin, combined into a clean transform value that only lists the functions actually in use -- plus the equivalent 2D matrix(), presets, randomize, and export to CSS, Tailwind, SCSS or React.

More CSS tools

CSS Tooltip Generator CSS Toggle / Switch Generator CSS Spinner / Loader Generator CSS Skeleton Loader Generator CSS Badge Generator CSS Transition Generator

What this tool does

Builds a CSS transform value from every individual transform function — translate, rotate, scale, skew, perspective — combined into one clean declaration that only includes the functions actually changed from their default, rather than a long string of no-op zero values.

2D and 3D

By default, translate X/Y, 2D rotate, independent scaleX/ scaleY, and skew X/Y cover the common cases. Turning on 3D reveals translateZ, rotateX, rotateY, and a perspective control — letting a card tilt or an isometric-style transform be built with real depth instead of only flat 2D effects.

Seeing the equivalent matrix()

Alongside the generated transform value, the equivalent 2D affine matrix() is computed and shown — useful for understanding what the individual functions actually compose into, or for a context that expects the matrix form directly. It only appears when 3D rotation isn't in use, since a 3D rotation needs a 4×4 matrix3d() instead.

Transform origin and presets

Transform-origin X/Y controls move the pivot point the transform applies around. Seven presets cover common patterns — horizontal and vertical flip, a 45° rotation, a skewed card, a 3D card tilt, and a 3D isometric look — plus a randomize button for quick exploration.

Getting the CSS out

Export as plain CSS, a Tailwind arbitrary-value class, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The transform is built and rendered entirely in the browser -- nothing is sent to a server.
Why does the generated transform only list some functions?
Only the functions actually changed from their default (translate not at 0, scale not at 1, and so on) are included -- keeping the output clean instead of a long string of no-op values like translate(0px, 0px) scale(1).
What does the equivalent matrix() value show?
The single 2D affine matrix() that the combined translate/rotate/scale/skew functions compose into -- useful for understanding the composition, or for a context that specifically needs the matrix form. It is hidden when 3D rotation is in use, since that needs matrix3d() instead.
Can scaleX and scaleY be set independently?
Yes -- a lock toggle keeps them equal by default for a uniform scale, and unlocking it allows an independent stretch or squash on each axis.
What does enabling 3D add?
translateZ, rotateX, rotateY, and a perspective control -- letting a card tilt or an isometric-style transform be built with real depth rather than only flat 2D rotation and scale.
What export formats are available?
Plain CSS, a Tailwind arbitrary-value class, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.
Theme Accent