The use of translateX/Y/Z and rotateX/Y() in transform

During the learning process, I found that the use of X and Y in rotate in transform was not clear. I thought about it for a while and posted it here. If there are any mistakes, I hope I can correct them. I hope it can help everyone.

1: There is a sequence of translate() and rotate() after transformation.

Take a cube as an example. The front is pink, the back is blue, the left is green, the right is yellow, the top is orange, and the bottom is blue.

This is the cube that has been implemented. Another cube with the code opacity: 0.5 is added for easier viewing.
Now transform it into what it was before the implementation.

This is how the six sides of the upper, lower, left, and right sides overlap together. Next, move and rotate.

1. front/front

   transform: translateZ(100px);
   

2. after/back

   transform: translateZ(100px);
   

You only need to move forward and backward, no need to rotate, because the side length of the cube I set is 200px, so I only need to move 100px

3. Left/Left
   As mentioned before, transform has a sequence.

   transform: translateX(-100px) rotateY(-90deg);
   

   transform: rotateY(-90deg) translateZ(100px);
   

   **The final result of these two codes is the same, but the first one is to first shift the image 100px to the left and then rotate it 90° along the Y-axis, and the second one is to first rotate it 90° along the Y-axis and then shift it 100px to the left.

   At this time, you may be wondering why the second code moves to the left when it is obviously a transformZ move. I will explain this in the second part below. The first part talks about the effects of sequence**
   

4. right/right

transform: translateX(100px) rotateY(90deg);

transform: rotateY(90deg) translateZ(100px);

The first one is to first shift the picture to the right by 100px and then rotate it 90° along the Y-axis. The second one is to first rotate it 90° along the Y-axis and then shift it to the right by 100px.

5. on/top

transform:translateY(-100px) rotateX(90deg);

transform: rotateX(90deg) translateZ(100px);

The first one is to first move the picture upward by 100px and then rotate it 90° along the X-axis. The second one is to first rotate it 90° along the X-axis and then move it upward by 100px.

6. bottom/bottom

transform: translateY(100px) rotateX(-90deg);

transform: rotateX(-90deg) translateZ(100px);

The first one is to first move the image down by 100px and then rotate it 90° along the X-axis. The second one is to first rotate it 90° along the X-axis and then move it down by 100px.

Finally, add transparency to the last picture. If you are smart, you will definitely understand it.

2: Why does translateZ also move to the left?

I believe that if you are as smart as you, you must have discovered that the movements in the second code starting from the left, right, up, and down all use translateZ, and they are all rotated first before moving like this. In fact, this is a kind of Very convenient to use.

The reason is actually very simple, that is, rotation changes the direction of translateX/Y/Z.

I put a picture with the coordinate axis for easy understanding. I annotated the front, made the top transparent by 0.9, and returned the left to the original position.
Before rotation:


This is how the direction of the coordinate axis is changed after rotation, so you need to use translateZ
and Obviously this method is very convenient, because you only need to rotate the position first, and then you don't have to think about where to move, just use translateZ

Three: The rotation direction of transform:rotate

Finally , let me add some simple knowledge
rotate Clockwise is a positive value, counterclockwise is a negative value rotate(): Taking the front view , clockwise is a positive value, counterclockwise is a negative value. The 3D effect is determined by the code transform: rotateX(-45deg) rotateY(45deg); transform-style: preserve -3d; implemented.