Understanding the Matrix in CSS3 transform--Zhang Xin Xu

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=2427

I'm scared of you, bro.

When you fight, you will be shocked by the size of your study, and you will be intimidated by strange names (such as the "Laplace inequality"). This is consistent with the nature of emotional design: the interface design will make people feel that the software is easy to use!

Therefore, when you see the "Matrix" above, it is inevitable to fear (even if you have learned), normal psychology. Actually, this thing is a little complicated.

This, however, is a good chance for the cock to reverse the attack.

CSS Companion Room:
Do you have this feeling: Ah ah, every day is on the design of the page cut, seemingly technology has not been substantially improved AH, or feel the height of the future is limited!

We should all know that the 28 law (Pareto Law), that is, any group of things, the most important of which is only a small part, about 20%, the remaining 80%, although the majority, but is secondary. If you have the above feeling, then you belong to that 80%, a catch a lot, no feature of the page Aberdeen.

CSS threshold is low, no program basis or mathematical logic ability, but also can make a bit of self-feeling good things. However, you should be aware of what you can easily learn in general, and others can. Therefore, if you want to squeeze into the ranks of the 20%, you have to learn the average person can not learn the depth of learning that the general people can't learn things. Naturally, it takes a lot of extra effort. If every time you try to be a little bit more than others, what worry is not higher than others. When you are young, you insist!

The CSS matrix here is a great opportunity to show your differences with other peers. A lot of people are afraid to see the name, and see the strange mathematical writing to scare off, and you do not, meet the difficulties, the time to shake the phone to understand the matrix. Naturally, you are conspicuous a little. Similarly, a lot of other CSS aspects of things, you also more than others in-depth study a little, how can be a common page Aberdeen?

So start here and get rid of the 80%!

Pseudo-Companion Room:
Although all are engaged in computer, although are engaged in the Internet, although are written code, (said) write Java despise write JavaScript, write JavaScript despise write CSS. This can be understood, although raise the chicken to raise the duck to become the rich minority, but, one says you are the village raises the chicken, how? Shanghai professional mother of the line of sight immediately dropped 60°--by BS. Not because you are agricultural, but the problem of "chicken", if you are breeding Sri Lankan blue Peacock, the picky mother will probably look at the face (yo, Sri Lanka, foreign goods; yo, peacock, high-end goods).

Similarly, if you master the CSS are some of the "brick-building" of the work (although the brick is also brainiac), it is understandable to be ignored. However, the matrix of this thing is to turn the tide (the network called "Reverse attack") Good thing: CSS is also a complex high-end goods. And then some "graphics algorithm, location calculation" and other words, hey, immediately view from the turn.

Second, what is a matrix?

Matrix can be understood as a square, but the ordinary square inside the station is the person, the matrix is the value:
→

The so-called matrix calculation, is the two phalanx of people (can be imagined as the ancient phalanx of soldiers) mutual kill.

Matrices in the CSS3
The matrix in CSS3 refers to a method that is written as a matrix() and matrix3d() , the former is a moving transformation (transform) of the element 2D plane, and the latter is a 3D transformation. The matrix is 3*3, such as the above matrix, and the 3D transformation is the matrix of 4*4.

Some confused? Well, I think it's a little out of the story. Well, let's take a look at something else, layers of progressive- transform properties.

Specific details about the transform properties can be clicked here to fill a lesson. A slightly familiar person knows that there are several attribute methods intransform :

. Trans_skew {Transform:skew (35deg);}. Trans_scale {Transform:scale (1, 0.5);}. trans_rotate {transform:rotate (45deg);}. trans_translate {transform:translate (10px, 20px);}

Skew (skew), scaling (scale), rotation (rotate), and displacement (translate).

Have you ever wondered why the transform:rotate(45deg); element rotates 45 °, and what is the mechanism behind it?

The following diagram can explain the above questions:

Whether it's spinning or stretching, it's essentially an applied matrix() approach ( matrix() fixing several values), just like transform:rotate this form of expression, we're more likely to understand, memorize and get started.

In other words, understanding the transform matrix() matrix method is conducive to a thorough understanding of the properties of CSS3 transform , which will be applied to the 80% but only the appearance of the people opened the gap!

OK, now the above-mentioned CSS3 matrix interpretation should be made sense.

Third, the matrix application scenario

Although the title is " transform in the Matrix ", in fact, in the CSS3 and HTML5 world, this thing is still very extensive, such as SVG as well canvas .
In fact, about the matrix, I have introduced before, is introduced in the Internet Explorer matrix filter, when said, ie filter matrix and CSS matrix although the differences in the wording, but the matrix is the original calculation is consistent. Just before the introduction of the main is IE under the rotation and scaling, but also not very deep, so there are some limitations.

Four transformand coordinate system

A transform person who has been rotated can find out that the default is to rotate around the center point, which is the transform-origin point of the attribute and is an important basis point for all matrix calculations (refer to dev.opera.com).

When we set it through transform-origin attributes, the matrix-related calculations change as well. The reaction to the actual graphic effect is that the center point of the rotation stretch has changed!

For example, if we set:

-webkit-transform-origin:bottom left;

, the coordinate center point is the lower-left corner position. So the animation (case contraction) is based on the lower left corner of the picture:

The effect can be viewed here (Chrome browser).

To give a slightly hard-to-understand example, if we set this up:

transform-origin:50px 70px;

Then, the center point position has a middle move to the left 50 pixels, the top 70 pixels (see), and at this point the (30, 30) coordinates are the location shown in the white spot (this position will be used later).

Take a closer look, is not soon understand ha ~ ~

Five, are you ready? The play is coming.

transformthe CSS3 matrix() method is as follows:

Transform:matrix (A,B,C,D,E,F);

It's scary, it's a lot of arguments, not a slap. Well, if you think a~f of these 6 parameters as the goddess's noun, you will feel that the world is so.

In fact, these 6 parameters, the corresponding matrix is:

Note that the direction of writing is vertical.

As mentioned above, the matrix can be imagined as an ancient soldier phalanx, to make it change, only with another soldier array of fire, even if it is a small array.

The reaction here is the following conversion formula:

Where, x y representing all the coordinates (variables) of the transformation element. And ax+cy+e how did that come from behind?
ZXX: University time linear algebra knowledge, understand people here can skip directly

Very simply, the 1th value of each row of the 3*3 matrix is multiplied by the 1th value of the subsequent 1*3, and the 2nd value is multiplied by 2nd, 3rd and 3rd, and then added as a color callout:

ax+cy+eWhat is the meaning of that?
Remember, the ax+cy+e transformed horizontal coordinates bx+dy+f represent the vertical position after the transformation.

Are you confused again? No hurry, a simple example will understand.

Suppose the matrix parameters are as follows:

Transform:matrix (1, 0, 0, 1, 30, 30); /* a=1, B=0, c=0, d=1, e=30, f=30 * *

Now, we offset the center point of the element based on this matrix, assuming that, that is (0, 0) x=0 , y=0 .

So, the coordinates of the transformation are the x ax+cy+e = 1*0+0*0+30 =30 y coordinates bx+dy+f = 0*0+1*0+30 =30 .

As a result, the center point coordinates are changed from (0, 0) → (30, 30) . Control above there is a (30, 30) white point chart, well imagined, the original (0,0) position, moved to the point of the white (30, 30) spot, how, is not to the lower right at the same time offset 30 pixels ha!

is actually the transform: matrix(1, 0, 0, 1, 30, 30); same as transform: translate(30px, 30px); . Note translate : rotate All methods are required, and the units of the matrix method e, f parameters can be omitted.

A case in which you can fiercely click here: Matrix (1,0,0,1,30,30) example Demo

In a modern browser, there will be a similar effect to the following motion diagram:

The effect is just appearance, I think of a better idea to show how the matrix is transformed, you can click here: Matrix Decomposition Transformation Demo

To improve performance, each cell in the demo is decomposed into an 5px * 5px area. The demo is divided into two steps, first demonstrating how each unit's position is calculated, and then animating the offset of its position.

The job of this demo is to turn the browser's instantaneous calculation and rendering into a controllable step-up display, so that we can intuitively see how this matrix calculation works. As part of the process being demonstrated:

ZXX: Because the default 100 milliseconds interval is constantly rendered, so if your computer CPU or browser is not able to hold, you can cancel the "Auto-demo" Check, and then, click on the left hand button to manually step through.

Summarize
You might as well be aware of that, the matrix performance offset is:

Transform:matrix ( not with me, who, how not to go to college entrance examination, play Mahjong go, horizontal offset distance, vertical offset distance);

You just care about the next two parameters on it, as for the first 4 parameters, is the cow is a horse, male or female is not related.

Vi. transform matrix matrices and scaling, rotation, and stretching

The offset is the simplest and easiest to understand matrix effect, so it is explained in detail above. Below, in order to further deepen our understanding of the matrix, we will briefly talk about matrix matrices and scaling, rotation, and stretching effects.

Scaling (Scale)
The above offset, as long as the last two parameters are concerned, this scaling is as long as the care of two parameters. Which two?

If you are perspicacious enough, you should already know, because there are several occurrences:

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

had been betrayed.

Found no, matrix(1, 0, 0, 1, 30, 30); the element proportion of the same as the original, 1:1, and these several parameters, there are two 1 , ah haha! Yes, these two 1 are scaling related parameters.

Where the first zoom x axis, the second zoom y axis.

The formula is very clear, assuming that the proportions are s , then there are, matrix(s, 0, 0, s, 0, 0); then, to apply the formula, there are:
x‘ = ax+cy+e = s*x+0*y+0 = s*x;
y‘ = bx+dy+f = 0*x+s*y+0 = s*y;

matrix(sx, 0, 0, sy, 0, 0);that is, equal to scale(sx, sy) ;

Well, so far, needless to say ...

Seeing is real, so the demo is going to drop, you can click here: Matrix matrices and Scaling Demo

To avoid covering the upper text box and describing the seat when the element scale is magnified, the element's coordinate origin is moved to the upper-left corner.

Rotation (rotate)
The rotation is more advanced than the previous two, using the trigonometric functions (which may be the shadow of the student's time).

Methods and parameters are used as follows (assumed angle is θ ):

Matrix (cosθ,sinθ,-sinθ,cosθ,0,0)

In combination with the matrix formula, there are:

X ' = x*cosθ-y*sinθ+0 = X*cosθ-y*sinθy ' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

This is somewhat similar to the rotation in the Iematrix filter (M11 represents the 1th of the 1th row of the matrix (parameter a), and the M21 represents the first line of the matrix 2nd (parameter B) ...) ：

Filter:progid:DXImageTransform.Microsoft.Matrix (m11=cosθ,m21=sinθ,m12=-sinθ,m22=cosθ ');

Gee, four parameters, I can't remember! Don't panic, we can remember this:
CS-SC: Third day-go to bed, symmetrical structure, this can not forget it ~ ~

You can get a hard click here: Transform Matrix and Rotate Demo

However, to tell the truth, in terms of rotation, rotate(θdeg) this form of writing is matrix much simpler, first memory simple, second, no calculation. For example, rotate 30 °, the former directly:

Transform:rotate (30DEG);

And the use matrix of the representation is also calculated cos , the sin value:

Transform:matrix (0.866025,0.500000,-0.500000,0.866025,0,0);

Stretching (skew)
Stretching is also used in trigonometric functions, tanθ but, moreover, it is b, c related to two parameters and is written as follows (note y the axis tilt angle in front):

Matrix (1,tan (Θy), tan (θx), 1,0,0)

The applied matrix formula evaluates to:

X ' = X+y*tan (θx) +0 = X+y*tan (θx) y ' = X*tan (θy) +y+0 = X*tan (θy) +y

Corresponds to skew(θx + "deg"，θy+ "deg") this notation.

Where the θx x angle of the axis skew, θy representing the y axis, is not associated.

Or by example, you can really click here: Matrix matrices and stretching demo

Under Chrome, you can see the effects of stretching at different tilt angles in a very dynamic way:

Seven, since there is a simple skew, rotate ..., what is the use of the matrix?

I think someone would be surprised, since CSS3 transform provides the like skew , rotate , the … effect, that also need to master and familiar with the big head of the matrix method to do?

Good question, indeed, for a general interactive application, the transform properties provided by default are sufficient, but, some other effect, if the transform property does not provide an interface method, then what should you do? For example, " mirror symmetry effect "!

There is no more, this is, can only rely on matrix the matrix. You know, matrix matrices are transform the basis of transformations and can handle a lot of high-end effects, as an advanced application technique. Master the Foundation, can soldiers come to block punches AH.

OK, here's how to use the CSS3 transform matrix matrix to achieve the mirroring effect.

This is a bit difficult, so we look at the demo first, you can click here: Matrix and mirror symmetry effect demo

The angular value of the rotation is entered in the box (used to determine the symmetric axis of the mirror), and then loses focus, rendering the corresponding mirror symmetry effect:

You can experience matrix the effect of a mirrored gradient on a browser such as Firefox or Chrome.

One of the axes in the demo page is for the sake of understanding the effect I add, in fact, the axis is invisible when mirroring symmetry.

The point around the axis is the center of the transformation in the CSS3 transform , naturally, mirror symmetry is no exception. Because the axis always passes through the origin, it can be represented by arbitrary axes of symmetry y = k * x . The matrix expression is:

Matrix ((1-k*k)/(1+k*k), 2k/(1 + k*k), 2k/(1 + k*k), (k*k-1)/(1+k*k), 0, 0)

How did this get?
Ah, high school math is coming, so when the college entrance examination, such as, already y=kx , and know the point (x, y) coordinates, the symmetry point (x ', y ') coordinates?

Very simple, one is vertical, the second is the center point on the axis, so there are:

(y-y‘) / (x - x‘) = -1/ k → ky-ky‘ = -x+x‘
(x + x‘) / 2 * k = (y + y‘)/2 → kx+kx‘ = y+y‘

Very simple, put x‘ and y‘ put forward, there are:

x‘ = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y;
y‘ = 2k/(k*k+1) *x + (k*k-1)/(k*k+1) *y;

And then combine the matrix formula:
x‘ = ax+cy+e;
y‘ = bx+dy+f;

We can get:
a = (1-k*k)/(k*k+1);
b = 2k/(k*k+1);
c = 2k/(k*k+1);
d = (k*k-1)/(k*k+1);

This is the parameter value in the Matrix method above!

Drafts calculated for yourself:

Matrices in the 3D transformation

The 3D transformation is only one D more than 2D, but not more complex. From two to three dimensions, from 4 to 9, and in the matrix from 3*3 into 4*4, 9 to 16.

In fact, many things in essence are consistent with 2D, but the complexity is not the same. Here is an example of a simple 3D scaling transformation.

For the 3D scaling effect, the matrix is as follows:

The code representation is:

Transform:matrix3d (SX, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

You can click here: 3D Scale transform demo under Matrix3D

Added on 2013-04-24
For 3D transformations, see the evil article: "CSS3 3D Transform transform, that's it!" ”

Ix. concluding remarks

Think about it, there's nothing to nag about. If there is doubt or inaccuracy in the view of the text, please correct me. Thanks for reading!

Reference article:
Understanding the CSS Transforms Matrix
CSS3 transformation matrices Needed in front-end development

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2427

(End of this article)

Understanding the Matrix in CSS3 transform--Zhang Xin Xu