css transform matrix and equivalent css transform are different

Question

I have a simple css transform, and it works nicely when I use css transform matrix,

According to this answer css transform matrix values are equivalent to the rotate, skew and scale functions as follows

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

• arguments a and d are for scaling the element in the X and Y direction respectively. 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 in the X and the Y direction respectively. Identical to that of the translate(e, f) method.

My question is... Is this information incorrect? because as my example shows I had to give totally different values to get the circle into the same scale and x,y position.

Simple Codepen transform example

.scale-in {
  transition:All 1s ease-in-out;
  transform: scale(3,3) translate(-170px,-80px);  
}
.scale-in-matrix {
  transition:All 1s ease-in-out;
  transform: matrix(3, 0, 0, 3, -500, -250); 
}

You can test this out in my example by changing the JavaScript on line 6 to:

this.classList.add("scale-in-matrix");

Also as a small additional question, why does the translate loop left and then back to right in my example but it is extremely smooth when using transform matrix?

Answer 1

You need to understand that most transforms are NOT commutative.

Most mathematic operations are commutative—that is, the order in which they are applied doesn't matter. But transforms are not. The order is very important. The combination of translation and zoom gives different results if you first do the translation and then the zoom, or if you do the opposite.

So this:

transform: scale(3,3) translate(-170px,-80px);  

is not the same as this:

transform: translate(-170px,-80px) scale(3,3);  

In the first case, you first translate, and after that you zoom. So the initial transform is multiplied by 3, which is equivalent to

transform: translate(-510px,-240px) scale(3,3);  

And this transform is quite close to your matrix . If you look closer, you will see that your matrix result is not exactly equal to your transform result.

By the way, matrix multiplication exhibits the same behavior. The order in which you multiply two matrices is important. To make thing easy, the order in which you set the transforms in the transform CSS is the same in which the matrix multiplication works. So

transform: translate(x, y) scale(fz, fy) 

gives the same result as

transform: matrix (....)

where the matrix is calculated as the matrix equivalent of the translation multiplied by the matrix equivalent of the scale.