CSS3 the order of multiple values of transform attributes

I have been troubled by the order of the transform multiple values of attributes. Later I knew it was about the order, but I don't know why. I think a lot of people, as I used to know, don't know why. If you do not know, perhaps this article will be helpful to everyone.

Let's look at an example first.

htmlCode:

    <div id="red1"></div> <div id="red2"></div>

cssCode:

    body {        margin: 0;    }    div {        width:100px; height:100px; background:red; } #red1 { transform: rotate(45deg); } #red2 { transform: rotate(45deg) translate(100px, 100px); }

Red Box One transform property has only one value rotate(45deg) , red box two more than one value translate(100px, 100px) , horizontal and vertical are translated 100px , but you can see the Red Box 2 has a vertical direction with displacement. What's going on?

In fact, when the 45 degree of rotation, the entire coordinate system of the element rotates 45 degrees, such as:

Figure 1 is the normal coordinate system, and Figure 2 is 45 the coordinate system after the degree of rotation. So the red box will be rotated (the selected anchor point in the center point, positive clockwise) coordinate system translation (along the direction of the X and Y axes in Figure 2, the x-axis movement will be down to the right, the y-axis will move to the left). Because the values I set are special, they are only shifted in the vertical direction. By calculating the red box two vertical downward translation 100√2px , that is, the length of the red box diagonal.

CSS3 the order of multiple values of transform attributes