Skip to tool
ecech.
💻 Developer & Code

Decompose a 2D CSS Transform Matrix

Expose rotation, scale, determinant and translation from a nonsingular 2D affine matrix.

number
number
number
number
px
px

Rotation angle

Scale X

Scale Y from determinant

Translation magnitude

Advertisement

How the calculation works

Inputs6 visible fieldsRuleConverterPrimary outputRotation angle

How to Use This Tool

Expose rotation, scale, determinant and translation from a nonsingular 2D affine matrix. Convert CSS matrix(a,b,c,d,e,f) values into one documented rotation-scale decomposition with determinant and translation outputs.

The decision this tool supports

The six matrix numbers are easy to copy from DevTools but difficult to interpret when debugging an unexpected rotation, reflection or scale. This page keeps the decision bounded to rotation angle and the supporting outputs shown beside it. Matrix to Components does not import an account, infer a market rate, or silently substitute an industry average.

Measured inputsNamed formulaDecision outputs
matrix(0.866, 0.5, -1, 1.732, 20, 30) decomposes to about 30 degrees rotation, scale X 1, scale Y 2 and 36.1 px translation.

Inputs and units

The Matrix to Components calculation uses Matrix a, Matrix b, Matrix c, Matrix d, Translate X, Translate Y. Keep all money values in one currency and all time, distance, mass, energy or volume entries in the unit printed beside the field. Mixing Matrix to Components scopes can produce a plausible number with the wrong meaning.

  • Matrix a is entered in number.
  • Matrix b is entered in number.
  • Matrix c is entered in number.
  • Matrix d is entered in number.
  • Translate X is entered in px.
  • Translate Y is entered in px.

Formula and worked check

scaleX = hypot(a,b); rotation = atan2(b,a); determinant = ad − bc; scaleY = determinant ÷ scaleX; translation magnitude = hypot(e,f). matrix(0.866, 0.5, -1, 1.732, 20, 30) decomposes to about 30 degrees rotation, scale X 1, scale Y 2 and 36.1 px translation. The Matrix to Components default is an executable known-answer case, not a benchmark or recommendation. Change one input and verify that the direction of rotation angle still matches the stated relationship.

How to interpret the result

This is one rotation-first decomposition; compare the determinant sign and original matrix because transform order and skew create non-unique component descriptions. The additional Matrix to Components outputs expose the denominator, comparison, capacity or reverse value needed to audit the primary result instead of presenting one unexplained number.

Assumptions

  • The six values represent a CSS 2D affine matrix.
  • Rotation is extracted before the scale interpretation.
  • Floating-point rounding may slightly change clean authored values.

Save the Matrix to Components input values and date with any material decision. A later Matrix to Components rerun is reproducible only when the same assumptions and units are available.

Limitations and safety boundary

It does not recover the author's original transform order, perspective, transform origin or a unique skew decomposition; singular matrices are rejected. Matrix to Components is an estimate and cannot replace a contract, local code, licensed professional, calibrated measurement, lender statement or platform report where one governs the decision.

Source and privacy

The Matrix to Components definition or rule was checked against W3C CSS Transforms Module Level 1 on 2026-08-26. Recheck W3C CSS Transforms Module Level 1 when a specification or policy behind Matrix to Components can change. Matrix to Components arithmetic runs in this browser tab; ecech does not receive the values through a calculation API.

Sources & assumptions

Tool Spec v2 · verified 2026-08-26. Platform rules and fees can change; the editable inputs remain authoritative for your account.

Official references

Model assumptions

  • The six values represent a CSS 2D affine matrix.
  • Rotation is extracted before the scale interpretation.
  • Floating-point rounding may slightly change clean authored values.
  • It does not recover the author's original transform order, perspective, transform origin or a unique skew decomposition; singular matrices are rejected.
Advertisement

Frequently Asked Questions

What does Matrix to Components calculate?
It calculates rotation angle, scale x, scale y from determinant, translation magnitude from matrix a, matrix b, matrix c, matrix d, translate x, translate y using the displayed formula.
What known result verifies Matrix to Components?
matrix(0.866, 0.5, -1, 1.732, 20, 30) decomposes to about 30 degrees rotation, scale X 1, scale Y 2 and 36.1 px translation.
Which assumption matters most?
The six values represent a CSS 2D affine matrix.
When should I reject the result?
It does not recover the author's original transform order, perspective, transform origin or a unique skew decomposition; singular matrices are rejected.
Which source supports the calculation?
The recorded source is W3C CSS Transforms Module Level 1, reviewed 2026-08-26. User-specific inputs still come from the user's own records.
Does Matrix to Components send my values to a server?
No ecech calculation API receives values entered into Matrix to Components; its arithmetic runs in browser JavaScript.

Related tools in Developer & Code

Browse all Developer & Code tools
The desk where ecech. tools get written: a laptop, a notebook of to-dos and a whiteboard listing the tools on the site.

Made by one person

ecech. is not a content farm. Every tool here is written and checked by hand, one at a time, by someone who wanted the tool to exist and could not find a version that showed its working.

No accounts and no sign-in, and nothing you type reaches a server — every calculation on this page runs inside your browser. The ads are served by Google and do set their own cookies, which is set out in full on the privacy page. More about the site.