Invert CSS3 Transform Matrix

Question

How, if I have a CSS3 Transform Matrix, can I invert this matrix?

E.g. if I had this matrix for rotating 45 degrees and translating 10px, 10px

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.0000000000000008881784197001252, 14.142135623730951)

how can I calculate the inverse

matrix(0.7071067811865475, -0.7071067811865476, 0.7071067811865476, 0.7071067811865475, -14.142135623730951, 0.0000000000000008881784197001252)

for rotating -45 degrees and translate -10px, -10px? Is it always simply swapping the second and third argument and swapping the fifth and sixth element (while doing *-1)?

kirilloid · Accepted Answer · 2012-03-20 13:59:06Z

1

No it is not. In both cases (direct and inverse) dx & dy are applied after (or before... but always in the same order) rotation/scale. One need to find an inverse matrix for the following one:

| a11 a12 dx |
| a21 a22 dy |
|  0   0  1  |

And discard the third row of the result.

In case, you only have the rotation and no scaling, inverse matrix would be something like

| a11 a21 a11*x+a21*y |
| a12 a22 a12*x+a22*y |

edited Mar 20, 2012 at 13:59

answered Mar 20, 2012 at 12:31

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Willem Mulder Over a year ago

So how would I go about inverting that matrix? Which elements should be swapped with which? I don't know much about matrices and am looking for a quick fix if possible :-)

kirilloid Over a year ago

This could be googled easily. E.g. purplemath.com/modules/mtrxinvr.htm mathworld.wolfram.com/MatrixInverse.html

Willem Mulder Over a year ago

I had found these functions, but they appear quite complicated. I hoped there would be a simple swap (like I assumed) or some other easy function that I could apply. Do you know of any JS functions that inverse a 3x3 matrix?

Willem Mulder Over a year ago

So I found sylvester.jcoglan.com/api/matrix.html#inverse which seems to do the trick. I will try this out, and if it works, accept your answer.

Willem Mulder Over a year ago

It took some fiddling, but it works now! I can inverse CSS3 Matrix functions. Woo :-)

Collectives™ on Stack Overflow

Invert CSS3 Transform Matrix

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related