CSS3 transform multi-valued sequential execution order problem

when you see the order of transform in a video tutorial on the Internet, it is mentioned that the execution sequence of transform is written first, for example: 

this.style.transform = "rotateZ(180deg) translateX(50px)"

what is explained on the video screen is to perform translation first, then rotate, that is, write first and then execute, but see

mentioned in some blogs on the Internet.
: in transform, when we have both displacement and other attributes, remember to put the displacement first, first move to our desired position, and then make other deformations.
The meaning of

should be executed in order.
how does transform perform when there are multiple values, and whether the center point of displacement will change? this piece is very confusing. I would appreciate it if someone recommended a good article or answer!

Css3
Jun.02,2021
The

video is right. It is true that it is written later and executed first. I have my own test https://codepen.io/qq24081447.
. You can see that the diamond is indeed rotated, scaled and then shifted, but my code order is transform: translateX (50px) scaleX (0.5) rotate (45deg). The essence of

transform is actually introduced into a matrix. To deal with the matrix,
link: https://www.cnblogs.com/Ivy-s.

I think several worthwhile times are carried out sequentially, and the center point of the displacement will change according to the state of the current element.
suppose the first case:
div {

 width: 100px;
 height: 100px;
 background: red;
 transform: translateX(100px) scale(.5) ;

}

< / div >
here the translateX, is executed first, and then the scale,translateX is shifted according to the non-scale.

suppose the second case:
div {

 width: 100px;
 height: 100px;
 background: red;
 transform:  scale(.5) translateX(100px); /*  */

}

< / div >
here scale, is executed first and then translateX,translateX is shifted according to scale.
you can try these two situations. The distance of translateX will be different

.

Previous: If Mini Program judges whether the user has locked the direction of the screen?

Next: The following css code, has added important, why it still shows white

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu