CCS3 Instance Tutorials: Rotate and Rotatex

Article Introduction: This will explain why perspective put the first place in transform.

I think CCS3 's transform in the knowledge is very deep, can be a lot of interview questions, before the article talked about the position of perspective attribute, we look at the order of rotate today, first look at the following two CSS3 keyframe animation:

The starting and ending states of the two animations are the same (in fact, the original position), except for the order of rotate and Rotatex. But the animation effect is surprisingly different.

The CSS code is as follows:

Css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20-21

@-webkit-keyframes raceFlag0{ 0%{ -webkit-transform:rotate(-720deg) rotateX(0deg) ; -webkit-transform-origin:100% 0%; } 100%{ -webkit-transform:rotate(0deg) rotateX(-360deg) ; -webkit-transform-origin:100% 0%; } } @-webkit-keyframes raceFlag1{ 0% { -webkit-transform: rotateX(0deg) rotate(-720deg); -webkit-transform-origin:100% 0%; } 100% { -webkit-transform: rotateX(-360deg) rotate(0deg); -webkit-transform-origin:100% 0%; } }

I saw the Mozilla website introduction, which did not mention the order of the problem. So I did the following experiments.

Set the style of the two same elements to:

Css

1 2 3 4 5

-webkit-transform: rotateX(-135deg) rotate(-270deg); -webkit-transform-origin: 100% 0%; -webkit-transform: rotate(-270deg) rotateX(-135deg); -webkit-transform-origin: 100% 0%;

The results are not the same. The following figure:

Is it the reason for the-webkit-transform-origin setting? We remove the attribute:

We reduced the problem rotation angle to 45 degrees and 90 degrees, in order for the Rotatex effect to be obvious, we added the perspective attribute. Two CSS are:

Css

1 2	-webkit-transform: perspective(200px) rotateX(45deg) rotate(90deg); -webkit-transform: perspective(200px) rotate(90deg) rotateX(45deg)

So we can find some regularity. Rotate is not the image of rotation, (nor loneliness) but the coordinate system. Specifically, the x axis is also rotated. Rotatex rotation is also a coordinate system.

We add a coordinate system to the diagram and you'll see. Note that the coordinate system of the graph on the right rotates 90 degrees clockwise.

Let's look at a few more examples:

Css

1 2	-webkit-transform: perspective(200px) rotateX(45deg) rotateY(10deg); -webkit-transform: perspective(200px) rotateY(20deg) rotateX(45deg);

Conclusion: Rotate, Rotatex, Rotatey and Rotatez are all rotational coordinate systems. When Rotatex, the y-axis and z-axis positions change. When Rotatey, the position of the x-axis and the z-axis changes. Rotate and Rotatez, the position of the x-axis and the Y axis changes.

We use rotate to pay attention to the order, especially when the animation.

Further conclusion: Transform students who have used canvas may know that in canvas transform, the object of deformation is canvas itself. It seems to be the same in CSS3 's transform. For example, I want to rotate the picture 90 degrees, the logic of the browser is to rotate the page-90 degrees, then render the picture, and then rotate the page 90 degrees. This achieves the effect of rotating the picture.

Therefore, in the Tranform attribute of CSS3, attributes such as perspective, rotate, and translate do not represent the final state of the object, but rather the "instruction queue" of the browser rendering object. The browser executes the instructions in turn.

This will explain why perspective put the first place in transform.

PS: The above conclusion is based on logical reasoning, I have not seen this part of the browser source code, please see the students correct.