CODEWITHSUNDEEP
javascripthtmlcssmatrix
Willem Mulder
Willem Mulder

Reputation: 13994

Invert CSS3 Transform Matrix

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)?

Upvotes: 1

Views: 2273

Answers (1)

kirilloid
kirilloid

Reputation: 14304

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 |

Upvotes: 1

Related Questions