Is the css transformation matrix equivalent to a transformation scale, skew, translation

Question

Are css transform matrix and scale transform, skew, translate equivalent?

According to this answer CSS conversion matrix values ​​are equivalent to rotate, tilt and scale the function, however this post makes it much more complicated ...

matrix (a, b, c, d, e, f)

• arguments a and d are for scaling an element. Identical to the method of the scale method (a, d) .

• arguments b and c are intended to distort the element. Identical to the skew (b, c) method.

• arguments e and f are for translating an element. Identical to the translate (e, f) method method.

Is the transformation matrix really simple?

So the following 2 conversions would be identical

.scale-in { transform: scale(3,3) translate(200px, 200px); } .scale-in-matrix { transform: matrix(3, 0, 0, 3, 200, 200); } 

Answer 1

They are not quite equivalent.

CSS transformations are NOT commutative . Most mathematical operations are commutative, which means that the order they apply does not matter. But the conversion is not . The order is very important, and for this reason we see different results here when the scale and translation are exchanged around.

So the following conversion

 transform: scale(2,2) translate(-100px,-50px); 

not equivalent

 transform: translate(-100px,-50px) scale(2,2); 

In the first case, you first zoom in and then translate

In the second example, we see that it moves smoother, since it first translates and then scales. Since it is first translated, the scale does not multiply in this case, so we can give an equivalent value for the translation

 transform: matrix(2, 0, 0, 2, -200, -100); 

virtually equivalent

 transform: translate(-200px,-100px) scale(2,2); 

And this is due to ordering, in this case both of them have the same order, and the position of the translation is not multiplied by the scale.

Updated codepen example

Another answer to a similar question that clarified the problem thanks to Vals