What is the problem of different rendering results due to the different order of the values of multiple attributes in CSS3 transform?

do the H5 page and transform the elements. If transform has multiple attribute values, adjust their order, and the rendering results are inconsistent. For example:

transform: scale(2) translate(100px,0px);
transform: translate(100px,0px) scale(2);

another example:

transform:rotate(30deg) skew(30deg,0deg);
transform:skew(30deg,0deg) rotate(30deg);

the code above looks exactly the same, and the rendering results are not consistent. As shown in the figure

online test address:
https://codepen.io/quiettroja.

Javascript transform css3

Oct.11,2021

this is obviously the case.
for example, if you add a number first and then do the multiplication transportation, and then do the multiplication operation first and then do the addition operation, can the two results be the same?

(3+2)*4=20 

(3*4)+2=14

transform is essentially the operation of matrices in mathematics, which is also in sequence.

this is because the transform-origi conversion origin has changed. You can try to unify the conversion origin of the two

Previous: Problems of locals.posts and locals.categories types in Hexo

Next: Which writing method is better judged by if?