Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail the "case analysis of CSS3 features", with detailed content, clear steps and proper handling of details. I hope this "case analysis of CSS3 features" article can help you solve your doubts.

Let's take a look at the comparison:

As you can see, I set the two red div in hover.

Panning 100px and zooming to the original 1 div 4 at the same time, the setting order of the two CPUs is different, which directly leads to the great difference in the final result.

Let's draw the key points: transform execution order!

If there are more than one attribute value after transform, then the property that is set later should be executed first.

In other words, the first red div is scaled down to the original 1 div 4, and then translate the 100px to get the final effect.

The second yellow div first panned the 100px and then zoomed to the original 1max 4, note: this panning and then zooming will also zoom the value of the translation, so the final translation of the small yellow square is smaller than the small red one.

Translation and rotation

Depending on the effect:

I set the two squares separately:

What's going on? Why is the effect reversed?

We know that the rotation of the dom element has a rotation base point (around which point) it is right in the middle of the dom element by default.

According to the above analysis, what is written will be executed first. Let's analyze it.

The first little red block. It is more acceptable to rotate the 100px 180 degrees around its center point and then translate it to the right.

Let's take a look at Xiao Huang. It translates the 100px to the right and then rotates it by 180 degrees. But it translates to the left. It doesn't seem to be what we expected.

Next, let me explain why:

Is this because the translation of the transform does not affect the position of the original rotation base point? What do you mean? When I first pan the 100px to the right, my rotation base point is still in its original position, that is, to the left of our yellow square. And then when we do the rotation, it rotates at the previous point on the left. So after rotating 180 degrees, it goes around to the left side of the rotation base point.

Let me simulate this process with gif.

A picture is worth a thousand words

To sum up, we can draw two conclusions:

The second point is very important, and we will use these two features later when making complex 3D.

Add: if you want to change the rotation base point, you can set it through transform-origin:x, y. I won't go into too many details.

Next point of knowledge:

If you want dom to transform in three-dimensional space, then depth of field must be a topic that cannot be avoided. I mentioned the concept of depth of field and camera in my "Front-end Graphics" series earlier, so it is still useful to apply it to CSS3.

We can think of depth of field as a perspective camera in our eyes or in threejs, which is characterized by its proximity and size.

For example, when I set perspective:300px;, I look at the dom element from the position of the 300px on the screen. If it is set to 500px, it must be smaller than the object in 300px.

Take a chestnut:

When we are in the parent container hover, we have the small box inside flip 360deg around the X axis, and set the style of depth of field in the parent container to: 800px

When we rotate along the X axis again, the stereoscopic feeling comes out, which should be relatively simple, which is the basis for us to do complex 3D later.

Read here, this "CSS3 feature case analysis" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.