Why order changes the result
With an origin at 0 0, translate(10px, 20px) scale(2, 3) first scales the point (20, 10) to (40, 30), then translates it to (50, 50). Reversing the function list applies the translation first and produces (60, 90). The displayed list is CSS order; the separate application order explains what happens to a coordinate.
Keep the origin with the right export
A quarter turn around the top-left corner moves a 200 × 100 box into bounds from (-100, 0) to (0, 200). The same turn around its center produces bounds from (50, -50) to (150, 150). The effective matrix includes that origin adjustment. That is why its CSS export uses transform-origin: 0 0.
Forward geometry and inverse mapping
The six CSS matrix values map a point with x′ = a x + c y + e and y′ = b x + d y + f. An inverse is useful when a coordinate in the transformed system needs to be mapped back to the original box. Zero scale can collapse the box, so a unique inverse is unavailable. Very ill-conditioned or out-of-range inverse matrices are withheld while valid forward geometry remains available. If only the selected point is out of range, its result is unavailable but the box, CSS and reports can still be inspected.
Frequently asked questions
What order are CSS transform functions applied in?
The matrix is built from the listed functions from left to right, but the rightmost function acts first on a coordinate. translate then scale therefore differs from scale then translate. This calculator shows both the CSS list and point application order.
Which box and coordinates does this calculator use?
It models one untransformed border box with local top-left at (0,0). X increases rightwards and Y downwards. Dimensions, translations, points and bounds use CSS pixels. Percentage origins refer to the entered border-box width and height. Page layout offsets, ancestor transforms, writing-mode remapping and 3D are not included.
Why does the exported matrix use transform-origin: 0 0?
The effective matrix already includes the selected origin. Applying that matrix with the original origin would apply the origin adjustment twice. The original-function CSS retains your selected origin; the equivalent matrix CSS deliberately uses origin 0 0.
Can an origin lie outside the box?
Yes. Negative origins and origins over 100% are valid. This tool supports percentage origins from -1000% to 1000%, or explicit pixel origins from -1000000 to 1000000.
Is skew(x,y) the same as skewX(x) skewY(y)?
No. The paired skew function has the matrix entries a=1, b=tan(y), c=tan(x), d=1. Sequential skewX and skewY multiplication generally changes the diagonal as well. This calculator uses the single paired CSS skew function.
What happens with zero scale or a singular matrix?
Forward mathematical coordinates and bounds can still be calculated, but a singular transform has no unique inverse. CSS does not render elements with a non-invertible transform. The known-geometry diagram can show a collapsed line or point, and inverse output is unavailable. Matrices too close to singular or whose inverse exceeds the supported coordinate range also disable inverse calculations. Valid forward geometry remains available. An out-of-range mapped point is reported separately without discarding the box or CSS.
Does the SVG export contain my CSS or uploaded artwork?
No. It is a normalized diagram of the original and transformed box, the origin and the mapped point. It is built only from validated numbers. The CSS exports and JSON report retain the original pixel geometry. No user SVG, HTML, CSS expressions, scripts or external assets are loaded.
What are the accuracy and input limits?
Dimensions are 0.000001–1000000 pixels; translations and pixel origins are within plus or minus 1000000; rotation is within plus or minus 360000 degrees; skew is within plus or minus 89 degrees. Scale magnitudes are at most 1000000 and nonzero scales at least 1e-12. Points are within plus or minus 1e12. Nonzero input magnitudes below 1e-100 are rejected. Finite JavaScript precision is used. Calculated coordinates and inverse coefficients must stay within plus or minus 1e18; unavailable inverse or point results are explained separately. Inverse calculations require a scaled determinant above 1e-12, and geometry with unreliable tiny edges at large offsets is rejected. Displays are rounded; exports retain Number precision.
References: W3C CSS Transforms Level 1, CSS matrix notation and transform-origin.
Related tools
SVG ViewBox & Coordinate Calculator · Animation Keyframe Timing Calculator · CSS Object-Fit & Focal Point Calculator · All image tools