反转CSS3变换矩阵

时间:2012-03-20 12:23:48

标签: javascript html5 css3 matrix

如果我有一个CSS3变换矩阵,我可以如何反转这个矩阵吗?

E.g。如果我有这个矩阵旋转45度并翻译10px,10px

矩阵(0.7071067811865475,0.7071067811865476,-0.7071067811865476,0.7071067811865475,-0.0000000000000008881784197001252,14.142135623730951)

如何计算逆

矩阵(0.7071067811865475,-0.7071067811865476,0.7071067811865476,0.7071067811865475,-14.142135623730951,0.0000000000000008881784197001252)

旋转-45度并翻译-10px,-10px?是否总是简单地交换第二个和第三个参数并交换第五个和第六个元素(同时执行* -1)?

1 个答案:

答案 0 :(得分:1)

不,不是。在这两种情况下(直接和反向)dx& dy在旋转/缩放之后(或之前...但始终以相同顺序)应用。 需要找到以下一个的逆矩阵:

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

弃掉结果的第三行。

如果你只有旋转而没有缩放,逆矩阵就像是

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