Simple and rude explanation of the transform attribute in CSS3

in advance, the scope of this article is still limited to 2D transform.

For CSS3 of the transform attribute, really put it down, with this feature, a variety of special effects easy to fix. Quote a word "spin, jump, I don't Stop". Transform is so fashionable, is so capricious. Of course, his wayward place is not only in terms of functionality, but also in terms of use. Let's take a look at the introduction of transform 2D in the website.

Look at a bit more, first to classify: a matrix, three translate, three scale, three skew, a rotate. And three translate are divided into three samples for xy,x,y. For the relationship between these operations, I drew a picture to show it rudely.

It may be confusing to see why the matrix is at the top of all the other operations, except that the matrix is an extension of the matrix, and what does it mean? Translate, scale, skew and rotate these operations are taken out to people who do not understand the matrix principle of use, afraid you do not understand the principle, so encapsulated a few ways out, so you can easily use the matrix method. How to prove it? Interested children's shoes can go to the style of the element (note: Not a class rule, is a computed style), or output the transform property of the element. See if it gets all the results of a unified matrix, similar to:

Matrix (1, 0.466307658154999, 0, 1, 0, 0)

No wordy, since this is an operation is ultimately attributed to the matrix, then what is the relationship between them? If I use the knowledge of the matrix to tell you how to calculate, it does not conform to the title of this article, and this kind of article has a lot of, I also do not caught dead, or adhere to the principle of the title: Simple Rude explanation.

First of all, to say translate, translation came to be "transfer." First explain the syntax of translate:

Transform:translate (25PX,26PX)

, which means 25 pixels and 26 pixels to the right, and then we convert to the matrix syntax to look at this line of statements:

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

Sharp-eyed children's shoes should have found the problem, the final 25 and 26 represents the x-axis and the y-axis of the displacement of interested children shoes can be their own to try to separate the X-displacement and y-displacement, here does not take up space, of course, here also emphasize the initial value of transform, That is, there is no conversion. The default value of the matrix is: Transform:matrix (1, 0, 0, 1, 0, 0), so as not to understand the following explanations.

And then the scale, I used to translate to "zoom", so the translation is also corresponding to his function: Zoom component. To demonstrate the syntax:

Transform:scale (1.1,1.2);

Let's also look at the statements converted into matrix format:

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

It is obvious that the scale of X and the scaling of the Y axis correspond to the first and fourth values in the matrix, and their values correspond to the meaning of how many times they are magnified. Still, separate tests for the X and Y axes are not done.

We look at skew, I translated into "tilt", the function of skew is to let the component tilt a certain angle, can be used to draw parallelogram, to have seen "with inertia movement" is through this realization, demonstration skew with a single to demonstrate a more reliable

Transform:skewx (45deg); Transform:skewy (45deg);

The statements corresponding to the matrix format are:

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

Did you find the problem? The X-Tilt corresponds to the change of the third value, the Y-tilt corresponds to the change of the 2nd value, and then I explain the meaning of the value, this value is the angle of rotation of the tan value, need to rotate 45° angle, corresponding to 1, interested can try other values to verify.

Here, we understand the meaning of the matrix's six values, respectively:

First element: X-axis magnification

Second element: The tan value of the Y-tilt angle

Third element: The tan value of the X-Tilt angle

Fourth element: Y-Axis magnified remarks

Fifth element: Pixel size shifted to the right

Sixth element: The pixel size that is shifted downward.

Speaking of which is not finished, there is a ratate no explanation, before the interpretation of the first look at an illustration:

These two pictures look similar, don't they? True, but the difference is that the above figure is achieved through rotate, and the following figure is achieved through skew, that is, the rotation of 45 degrees angle, respectively, take two generated after the style of view:

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

Seeing this, a lot of people's doubts come out, what is this pile of decimal points? The above 0.7 refers to one of the square root 2 points, that is, cos45° or sin45°, then what is the two methods of calculation? This has to go back to the matrix implementation of the principle to explain, I simply say transform principle: First find a central point (the default is the most middle), and then calculate the coordinates of each pixel relative to that point (the upper left corner of 100*100 is -50,50), Then get the matrix incoming six values and 0,0,1 form a new matrix, and then the matrix composed of the original coordinate operation to get a new matrix, and then in the new matrix to get new x-coordinate and new y-coordinate.

Well, it's not easy to say that, a little off my title, or simply rude to explain that the matrix is replaced by: (A,B,C,D,E,F) six values, and then calculates the relative coordinates of each pixel according to the center point, and then calculates the new coordinates, the new coordinates are calculated as:

X ' = a * x + c * y + E; Y ' = b * x + d * y + F; When rotate, the cosθ,sinθ,sinθ, and cos θ are passed in, while skew values are: Cosθ/consθ , sin θ/cosθ , sinθ/cosθ , cosθ/cosθ. So that's why when you use skew to rotate, the image magnifies the square root by twice times.

In fact, under normal circumstances, using the six calculation method mentioned above to use the matrix formula is enough for this article is only for the sake of the integrity of the article written, but instead of the simple rough principle.

Simple and rude explanation of the transform attribute in CSS3