CSS transform generator

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.