Your files stay on your device

CSS transform generator

Stack CSS transform functions in any order with a live preview of each step, and copy the transform plus its matrix equivalent.

The preview applies the same declaration your browser would, so it shows the real thing. The folded matrix is a fixed number list: percentages in translate() cannot be folded without an element size, so this tool only accepts px translations, and transform-origin is folded using the reference box above. A 3D result assumes the parent supplies the perspective value; transform-style is not set, so nested preserve-3d scenes render differently. skew() at 90 degrees, a zero rotate3d axis, and non-positive perspective distances are refused rather than printed as Infinity or NaN.
Options

More regex & cron tools

- Accessible name debugger (/dev/accessible-name-debugger)
- JSON formatter (/json/formatter)
All regex & cron tools (/dev)

Was this tool useful?
YesNo

Canonical HTML: https://nutter.tools/dev/css-transform-generator
Markdown version: https://nutter.tools/dev/css-transform-generator.md
Plain-text version: https://nutter.tools/dev/css-transform-generator.txt
Agent index: https://nutter.tools/llms.txt