Is a css transform matrix equivalent to a transform scale, skew, translate

Question

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

According to this answer css transform matrix values are equivalent to the rotate, skew and scale functions, however this post makes it seem much more complex...

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

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

• arguments b and c are for skewing the element. Identical to that of the skew(b, c) method.

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

Is the transform matrix actually that simple?

So the following 2 transforms 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 exactly equivalent

CSS transforms are NOT commutative. Most mathematic operations are commutative, meaning that the order they are applied doesn't matter. But transforms are not. The order is very important, and it is the reason we see different results here when scale and translation is swapped around.

So, the following transform

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

is not equivalent to

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

In the first case, you first zoom, and after that you translate

In the second example we see it move smoother, as it first translates and then scales. Because it first has translated in, the scale is not multiplied in this case, so we can give an equivalent value for the translation

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

is actually equivalent to

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

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

An updated codepen example

Another answer to a similar question which cleared up the issue, thanks to Vals