A simple and crude explanation of the transform attribute in css3_html/css_WEB-ITnose

Please note in advance that the scope of this article is still limited to 2D transform.

I really love the transform attribute of CSS3. With this feature, various special effects can be easily achieved. To quote a lyric, "Spinning, jumping, I won't stop." Transform is so fashionable and willful. Of course, his willfulness is not only in terms of function, but also in terms of use. Let’s take a look at the introduction to the use of transform 2D on the W3C official website.

There are a lot of them, so let’s classify them first: one matrix, three translate, three scale, three skew, and one rotate. The three translates are divided into three types: XY, X, and Y. I drew a picture to roughly show the relationship between these operations.

Seeing this, some people may wonder why matrix is ​​at the top of all other operations. In fact, other operations except matrix are an extension of matrix. What does it mean? ? The operations of translate, scale, skew and rotate are all used by people who do not understand the matrix principle. I am afraid that you do not understand the principle, so I have encapsulated several methods to allow you to use the matrix method conveniently. How to prove it? Interested children can check the style of the element (note: not the class rule, but the calculated style), or output the transform attribute of the element. See if you get uniform matrix results, similar to:

matrix(1, 0.466307658154999, 0, 1, 0, 0）

No more verbosity, since this is an operation, it all ends up matrix, so what is the relationship between them? If I use the knowledge of matrices to tell you how to calculate, it will not fit the title of this article, and there are already many such articles, so I will not show my shame and stick to the principle of the title: simple and crude explanation.

First let’s talk about translate, which means “transfer”. First, explain the syntax of translate:

transform：translate（25px,26px）

, which means shifting 25 pixels and 26 pixels to the right and down. Then we convert it to matrix syntax and look at this line of statement:

transform: matrix(1, 0, 0, 1, 25, 26);

Sharp-eyed children’s shoes should have discovered the problem. The last 25 and 26 represent the displacement of the X-axis and Y-axis. Children’s shoes who are interested can try the X-displacement and Y-displacement by themselves, here I won’t use it to take up space. Of course, the initial value of transform must be emphasized here. That is, the default value of matrix when there is no transformation is: transform: matrix(1, 0, 0, 1, 0, 0);, to avoid You can’t understand the explanation below.

Then there is scale. I am used to translating it into "zoom", so the translation also corresponds to its function: scaling component. Demonstrate the syntax:

transform:scale(1.1,1.2);

Similarly, let’s take a look at the statement converted into matrix format:

  transform: matrix(1.1, 0, 0, 1.2, 0, 0);

Obviously, the scaling of X here is The scaling of the Y-axis corresponds to the first value and the fourth value in the matrix respectively. Their values ​​correspond to how many times they are magnified. Still the same, separate tests for the X-axis and Y-axis will not be done.

Let’s take a look at skew again. I translate it as “tilt”. The function of skew is to tilt the component at a certain angle. It can be used to draw parallelograms and resemble the “inertial motion” we have seen before. " is achieved through this. It is more reliable to use a single Skew to demonstrate

transform: skewX(45deg);transform: skewY(45deg);

The corresponding statement in matrix format is:

  transform: matrix(1, 0, 1, 1, 0, 0);  transform: matrix(1, 1, 0, 1, 0, 0);

Did you find the problem? The X-direction tilt corresponds to changing the third value, and the Y-direction tilt corresponds to changing the second value. Then let me explain the meaning of this value. This value is the tan value of the angle that needs to be deflected, and it needs to be rotated at an angle of 45°. , corresponding to 1. If you are interested, you can try other values ​​to verify.

At this point, we understand what the six values ​​of the matrix represent:

The first element: X-axis magnification

The second Element: The tan value of the Y-axis tilt angle

The third element: The tan value of the X-axis tilt angle

The fourth element: Remarks for Y-axis amplification

Five elements: the pixel size shifted to the right

The sixth element: the pixel size shifted downward.

It’s not over yet. There is another ratio that has not been explained. Before explaining it, let’s take a look at an illustration:

These two pictures look like Is the effect almost the same? They are indeed almost the same, but the difference is that the above picture is realized through rotate, while the picture below is realized through skew, which is rotated at an angle of 45 degrees. Take a look at the two generated styles respectively:

  transform: matrix(0.707106781186548, 0.707106781186548, -0.707106781186548, 0.707106781186548, 0, 0);   transform: matrix(1, 0.466307658154999, 0.466307658154999, 1, 0, 0);

Seeing this, many people have questions. What are these decimal points? The 0.7 above refers to one-half of the square root, which is cos45° or sin45°. So what exactly are these two calculation methods? This has to go back to the principle of matrix implementation to explain. Let me briefly explain the principle of transform: first find a center point (the default is the middle), and then calculate the coordinates of each pixel relative to that point (the upper left corner of 100*100 That is -50,50), then get the six values ​​passed in by the matrix and 0, 0, 1 to form a new matrix, and then perform an operation with the matrix composed of the original coordinates to get a new matrix, and then add it to the new matrix Get the new X coordinate and the new Y coordinate.

Well, it’s no longer simple to say it like this. It’s a bit deviated from my title. Let’s explain it simply and crudely. The above matrix is ​​replaced by: (a,b,c,d,e,f ) six values, then calculate the relative coordinates of each pixel based on the center point, and then calculate the new coordinates. The calculation formula for the new coordinates is:

x' = a * x c * y e; y' = b * x d * y f; When rotating, the values ​​passed in are cosθ, sinθ, sinθ and cosθ respectively, and the values ​​passed in by skew are: cosθ/consθ, sinθ/cosθ, sinθ/cosθ, cosθ/cosθ. So this is why the image is enlarged by a factor of 2 when using skew for rotation.

In fact, under normal circumstances, it is enough to use the matrix formula using the six calculation methods mentioned above. This last part of this article is only written for the completeness of the article, but it has lost the principle of simplicity and crudeness. .