The css conversion matrix and the equivalent css conversion are different

Question

I have a simple css conversion and it works fine when I use the css transformation matrix,

According to this answer, the values ​​of the css transformation matrix are equivalent to the rotation, skew and scale functions as follows

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

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

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

Codec conversion 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 verify this in my example by changing the JavaScript in line 6 to:

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

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

Answer 1

You need to understand that most transformations are NOT commutative.

Most mathematical operations are commutative, i.e. the order in which they are applied does not matter. But there is no transformation. The order is very important. The combination of translation and scaling gives different results if you first perform the translation and then the scale, or if you do the opposite.

So this is:

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

does not match this:

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

In the first case, you first translate and then zoom in. Thus, the initial transformation is multiplied by 3, which is equivalent

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

And this conversion is pretty close to your matrix. If you look closer, you will see that the result of your matrix does not quite match your conversion result.

By the way, matrix multiplication exhibits the same behavior. The order in which you multiply the two matrices is important. To simplify the task, the order in which you set the transforms to CSS transform is the same in which 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.