CSS Transform Generator
Translate, rotate, scale and skew with a preview.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Transform Generator
How to use this tool
- Enter translate, rotate, scale and skew values. Leave any value blank to skip that transform.
- Press Generate to preview the transformed box and see the CSS.
- Copy the transform line into your stylesheet.
Worked example
With translate 10px, 20px, rotate 45 degrees and scale 1.5, the CSS is 'transform: translate(10px, 20px) rotate(45deg) scale(1.5);'. Transforms apply in the order written, left to right.
What this tool does not do / Limits
Two-dimensional transforms only: no 3D transforms, perspective, transform-origin or transition settings are offered, and the preview box is fixed-size, so very large translations may move it out of view.
Frequently asked questions
Does the order of transforms matter?
Yes. Transforms apply left to right, so rotating then translating gives a different result from translating then rotating.
What does scale 1.5 mean?
The element is drawn 1.5 times its normal width and height. Scale 1 leaves it unchanged, and values below 1 shrink it.
Related tools
JSON Studio
Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.
LiveRegex Tester
Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.
LiveSecurity Header and DNS Checker
Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).
Live