CSS3 transform Matrix

This article was posted on Fri 06/08/2012 01:16 and is classified under CSS related. Read 349,606 times, 90 times today

By zhangxinxu from www.zhangxinxu.com this address: www.zhangxinxu.com/wordpress/?…

One, elder brother, I was frightened by you

You’re intimidated by big guys when you’re fighting, and by strange names when you’re studying (e.g., “Laplace’s Inequality”). This is consistent with the essence of emotional design: good interface design makes people feel that the software is easy to use!

Therefore, when you see the above “Matrix”, it is inevitable to fear (even if you have learned), normal psychology. Actually, it’s a little complicated.

However, this is a good chance for diaosi to strike back.

CSS peer: Do you ever get the feeling that you’re just slicing through your design every day and not really improving, or that your future height is limited?

We should all know the 80-20 rule (Balledo’s Law), which states that the most important things in any given group are only a small percentage, about 20 percent, and the other 80 percent, though majority, are secondary. If you feel that way, you belong to the 80 percent, a handful of featureless pages.

CSS has a low barrier to entry, and you don’t need basic programming or mathematical logic to do something you feel good about. However, you should also know that what you can easily learn, others can too. So if you want to be in that 20 percent, you have to learn things that the average person can’t learn, that the average person can’t learn. Naturally, more effort is needed. If every time you try a little harder than everyone else, why not be a few degrees higher than everyone else. When you are young, you need to persist!

The CSS matrix is a great way to show you how different you are from the rest of the crowd. Many people recoil at the sight of names, or at the sight of strange mathematical writing; You didn’t, grasp the nettle, spend your phone time understanding matrices. Naturally, you came out on top. Similarly, many other CSS aspects, you also more in-depth than others a little bit, how can be an ordinary page boy?

So start here and get out of the 80 percent!

Pseudo-coline: although they are engaged in computers, although they are engaged in the Internet, although they are writing code, (allegedly) write JAVA despise write JavaScript, write JavaScript despise write CSS. This is understandable, although raise chicken raise duck to become rich not a few, but, say you are rural raise chicken, how? Shanghai’s professional mothers-in-law immediately dropped 60° – by BS. It’s not that you work in agriculture, it’s the chicken; If you’re a breeder of Sri Lankan blue peacocks, picky mothers-in-law might look at it (oh, Sri Lanka, foreign; Phew, peacocks, high quality).

Similarly, if all you know about CSS is “bricklaying” (although bricklaying is also a university subject), it’s not surprising that it will be ignored. Matrices, however, are a game-changer: CSS is also sophisticated and expensive. Some of the “graphics algorithm, location calculation” and other words, hey hey, immediately view frombecome.

What is a matrix?

A matrix can be understood as a square matrix, except that usually people are standing in the square matrix, and numbers are in the matrix:

–

And the so-called matrix calculation, is two phalanxes of men (can be imagined as the ancient phalanx soldiers) against each other.

The matrix in CSS3 refers to a method, written as matrix() and matrix3d(), the former is a transform of the 2D plane of an element, the latter is a 3D transform. 2D transformation matrix is 3*3, as shown in the matrix diagram above; The 3D transformation is a 4 by 4 matrix.

A little confused? Yeah, I think that’s a little out of place. Well, let’s look at something else first, layer by layer — the transform property.

For details about the transform property, click here to make up the lesson. For those of you familiar with transform, there are several attribute methods:

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

Skew, Scale, rotate and translate.

Transform :rotate(45deg); It rotates the element by 45 degrees. What’s the mechanism behind that?

The following chart explains the above question:

Both rotation and stretching are essentially implemented by matrix() method (modify matrix() method to fix several values). However, transform: Rotate is similar to transform:rotate, which is easier to understand, remember and use.

In other words, understanding the matrix() matrix method in Transform will help you understand CSS3’s transform properties better than the 80% of people who can use CSS3’s transform properties.

OK, now the CSS3 matrix explanation mentioned above should make sense.

Iii. Matrix application scenarios

Although the title says “Matrix in Transform”, in fact, in the world of CSS3 and HTML5, it has a wide range of applications, such as SVG and Canvas. As a matter of fact, I have introduced the Matrix before, when I introduced the Matrix Matrix filter in Internet Explorer. Although the filter Matrix in Internet Explorer is quite different from the Matrix in CSS, the Matrix calculation is the same. However, the previous introduction is mainly IE rotation and scaling, but also not very deep, so there are some limitations.

Four,transformAnd coordinate system

The usedtransformAs you can see, by default, it’s rotating around the center point, and this center point is thetatransform-originThe point corresponding to the property is also an important reference point for all matrix calculationsdev.opera.com).

When we set the transform-Origin property, the matrix correlation calculation changes. 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;Copy the code

Then, the center of the coordinate is the lower left corner. The animation (e.g. image shrinkage) is then based on the point at the bottom left of the image:

The image can be viewed here (Chrome).

To take a slightly trickier example, let’s set it like this:

transform-origin: 50px 70px;Copy the code

Then, the center point position has the middle moved 50 pixels to the left and 70 pixels to the top (see figure below), while the(30, 30)Is the position shown by the white dot (this position will be used later).

Take a look and see if you understand it quickly

Five, are you ready? Here comes the big one

The matrix() method of CSS3 transform is written as follows:

transform: matrix(a,b,c,d,e,f);Copy the code

Wow, there are so many parameters, you can’t even count them. Well, if you think of the six parameters a~ F as nouns for goddesses, you might think, well, that’s the way the world is

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

Note that the direction of writing is vertical.

As mentioned above, the matrix can be thought of as an ancient phalanx of soldiers, which can only be changed by fighting another phalanx of soldiers, even if it is a small phalanx.

The reaction here is the following conversion formula:

Where x and y represent all coordinates (variables) of the transformation element. So where did ax plus cy plus e come from? // ZXX: Linear algebra in college

Very simply, the first value of each row of a 3*3 matrix is multiplied by the first value of the following 1*3, the second value is multiplied by the second value, and the third value is multiplied by the third value, and then added together, as shown in the same color:

So what does ax plus cy plus e mean? Remember, ax plus cy plus e is the horizontal position, and bx plus dy plus f is the vertical position.

Confused again? No hurry, just a simple example.

Assume that 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 */Copy the code

Now, we offset the center of the element with respect to this matrix, let’s say (0, 0), that is, x=0, y=0.

So our x-coordinate is ax plus cy plus e is equal to 1 times 0 plus 0 times 0 plus 30 is 30, and our y-coordinate is bx plus dy plus f is equal to 0 times 0 plus 1 times 0 plus 30 is 30.

So the center point goes from 0, 0 to 30, 30. Imagine moving (0,0) to (30, 30) from (0,0) to (30, 30) to the bottom right.

Transform: matrix(1, 0, 0, 1, 30, 30); Transform: Translate (30px, 30px); Note: The translate, rotate and other methods require units, while the matrix methods e and f can be omitted.

An example of shengwan language, you can ruthlessly click here: matrix(1,0,0,1,30,30) example demo

On modern browsers, this should look something like the following GIF:

The effect is only superficial, I have a better idea to show how the matrix is transformed, you can ruthlessly click here: matrix decomposition transformation demonstration

To improve performance, each cell in the demo is broken down into 5px by 5px areas. The demonstration is two-step, showing how the position of each cell is calculated, followed by animation showing the offset of its position.

What this demo does is turn the browser’s instantaneous calculation and rendering into a controlled step display, so that you can see visually how this matrix calculation works. Below is a screenshot of the demo in progress:

// ZXX: The default render interval is 100 milliseconds, so if your COMPUTER CPU or browser can not handle, you can uncheck “automatic demo”, then click the button on the left to manually step by step view.

To sum up, as you are probably aware, the matrix performance offset is:

Transform: matrix(has nothing to do with me, which, why not go to the college entrance examination, play mahjong, horizontal offset distance, vertical offset distance);Copy the code

As long as you care about the last two parameters, as for the first four parameters, it does not matter whether it is a cow or a horse, male or female.

Scaling, rotation and stretching

Offset is the simplest and easiest to understand of the Matrix effect, so it is explained in detail above. Next, in order to further deepen the understanding of matrix, the matrix matrix and scaling, rotation and stretching effects will be briefly discussed.

The offset above the scale only cares about the last two parameters, and the scale only cares about the last two parameters. Which two?

If you were observant enough, you would already know this, as it appears many times above:

transform: matrix(1, 0, 0, 1, 30, 30);Copy the code

Already sold.

Matrix (1, 0, 0, 1, 30, 30); The element ratio is 1:1, and there are two 1’s in these parameters. Yeah, these 1’s are the scaling parameters.

The first scales the X-axis and the second scales the Y-axis.

If the ratio is S, then there is matrix(s, 0, 0, S, 0, 0); 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); Is equivalent to scale(sx, sy);

Well, at this point, no more needs to be said…

Seeing is believing, so demo still needs to drop, you can merciless click here: matrix matrix and zoom demo

In order to avoid obscuring the text box and description box when the element is scaled up, the element’s coordinate origin is moved to the upper left corner.

Rotate is a bit more advanced than the first two, using trigonometry (which can cast schoolboy shadows).

The method and parameters are as follows (suppose Angle is θ) :

Matrix (cosine theta, sine theta, - sine theta, cosine theta, 0, 0)Copy the code

Combined with the matrix formula, we can get:

X 'cosine theta, y = x * * sine theta + 0 cosine theta, y = x * * sine theta' y = x + y * * sine theta cosine theta + 0 = x + y * * sine theta cosine thetaCopy the code

This is somewhat similar to the rotation in the IEMatrix filter (M11 represents row 1 of the matrix (parameter A), M21 represents row 2 of the matrix (parameter B)…). :

Filter: progid: DXImageTransform. Microsoft. Matrix (M11 = cosine theta, M21 = sine theta, M12 = - sine theta, M22 = cosine theta. ');Copy the code

Oh, four parameters, I can’t remember! Don’t panic, we can remember it like this: CS-SC: grade three – go to bed, symmetrical structure, this forget it ~~

You can click here hard: Transform matrix matrix with rotation demo

To be fair, though, the rotate(θdeg) form is a lot easier to write than the matrix in terms of rotations. It’s a lot easier to remember, and b, it doesn’t need to be computed. For example, rotating by 30°, the former directly:

transform:rotate(30deg);Copy the code

While using matrix, we need to calculate the cosine and sine values:

The transform matrix (0.866025, 0.500000, 0.500000, 0.866025, 0, 0).Copy the code

Skew also uses a trig function, but tanθ, and its parameters are related to b and C, written as follows (note that the Y-axis tilt Angle comes first) :

Matrix (1, tan (theta) y, tan (theta) x, 0, 1)Copy the code

By applying the matrix formula, the calculation result is:

'x = x + y * tan (theta) x + 0 = x + y * tan (theta) x y' * tan (theta) y = x + y + 0 * tan (theta) y = x + yCopy the code

This corresponds to skew(θx + “deg”, θy+ “deg”).

Where θx represents the Angle at which the X-axis is tilted and θy represents the Y-axis, the two are not related.

By example, you can click here: Matrix matrix and stretching demo

In Chrome, you can view the effect of different tilt angles dynamically:

Since there is a simple skew, rotate.. What’s the use of the Matrix?

I think some people will be surprised, since CSS3 transform provides things like Skew, rotate,… Effect, that also need to master and familiar with the matrix method of large head why?

Good question. Yes, some of the default methods provided by the transform property are sufficient for general interaction applications, but what do you do about other effects if the transform property doesn’t provide interface methods? For example, “mirror symmetry effect”!

I don’t know what I can do. It’s just the matrix matrix. As you know, matrix matrix is the basis of transform, which can deal with many high-end effects. It is a kind of advanced application skill. If you know the basics, you’ll be able to stop the tide.

OK, here is a demonstration of how to use the CSS3 Transform matrix to achieve the mirror effect.

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

Enter the value of the rotation Angle (used to determine the axis of symmetry of the image) in the box, and then lose the focus, the corresponding mirror symmetry effect will appear:

You can experience the image gradient effect of Matrix in FireFox or Chrome.

One axis in the demo page is to make it easier to understand the effect I have added, but in fact the axis is invisible when mirrored.

The point around which the axis revolves is the center point of the transform transform in CSS3. Naturally, mirror symmetry is no exception. Since this axis always passes through the origin, any axis of symmetry can be represented by y = k * x. Then 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)Copy the code

How do you get this?

Ah, high school mathematics came, when the college entrance examination once again, as shown below, hasy=kx, and know the coordinates of the point (x, y), find the coordinates of its symmetric point (x ‘, y ‘).

Very simple, one is vertical, and the other is that the center point is on the axis, so there are:

(y)/(x – x – y ‘ ‘) = 1 / k, ky – ky ‘= x + + x’ x ‘(x) / 2 * k = (y + y’) / 2 – kx + kx = y + y ‘

It’s very simple. If you factor out x’ and y’, you get:

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;

X ‘= ax+cy+e; y’ = bx+dy+f;

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.

The following is a draft of my own calculation:

Eight, the matrix in 3D transformation

3D transformations are only one more D than 2D, but more complicated. From two to three, from four to nine; And in the matrix we went from 3 times 3 to 4 times 4, 9 to 16.

In fact, a lot of things are essentially the same as 2D, just different complexity. Here is a simple EXAMPLE of a 3D zoom transform.

For 3D scaling, the matrix looks like this:

The code representation is:

transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)Copy the code

You can click here ruthlessly: Matrix3D under the 3D scale transformation demo

Added on 2013-04-24 For 3D transforms, see evil in this article: “CSS3 3D Transform, nothing more!”

Ix. Concluding remarks

On second thought, there’s nothing to nag about. If there is any doubt or inaccurate opinion in this article, please correct it. Thanks for reading!

Transforms Matrix For CSS3 front-end development

CSS World
Display my exclusive purchase code

// Want a tip? Click here. Got something to say? Click here.

3d
css3
Matrix
transform
The tensile
rotating
matrix
The zoom