2

According to WebKitCSSMatrix documentation, multiply() function "Returns the result of multiplying this matrix by a given matrix that is on the right.". So

a.multiply(b) must be equal to a b in math notation.

But it seems that a.multiply(b) is indeed equal to b a; the result is equal to the product when the given matrix at the left.

For an example:

Let a:

 2, -2,  5,  0
-1,  0, 12,  0
 3,  1, -2,  0
 0,  0,  0,  1

and B:

 1,  4,  3,  0
 3,  1,  5,  0
 3,  4,  3,  0
 0,  0,  0,  1

Using this tool the product of a b is

c = a b:

11, 26, 11,  0
35, 44, 33,  0
0,   5,  8,  0
0,   0,  0,  1

In JavaScript:

a = new WebKitCSSMatrix("matrix3d(2,-2,5,0,  -1,0,12,0,  3,1,-2,0,  0,0,0,1)")
b = new WebKitCSSMatrix("matrix3d(1,4,3,0,  3,1,5,0,  3,4,3,0,  0,0,0,1)");

and a.multiply(b) is:

7,   1,  47,  0
20, -1,  17,  0
11, -3,  57,  0
0,   0,   0,  1

but actually b.multiply(a) is matrix c.

Am I missing anything?

2 Answers 2

1

You are correct in your observation but the spec is also correct in its description. What you have to observe is that matrices defined in the CSS spec are column-major where as most math books will tackle matrices in row-major format. Try converting it and see what happens.

1

Matrix multiplication is "in general not commutative" which means that a.multiply(b) is generally not going to be the same as b.multiply(a).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.