CSS3 transformation matrices Needed in front-end development

Want to write about the matrix transformation of the blog has been thinking for a long time, today saw Winter wrote a blog css3:transform and transition behind the mathematical principle, so it contributed to this article. Note that the following demo content requires modern browser support. Like Chrome/firefox/opera. The demo cannot be seen in the reader.

Matrix is the content of linear algebra, and it is a matrix transformation in computer graphics. Previously, a matrix transformation was almost impossible for front-end work. However, with the progress of the browser, the popularity of HTML5 and CSS3, for the front end can operate more and more things, so, matrix transformation also appeared in the field of vision.

Matrix transformation, sounds like a very advanced thing, in fact, is simply a series of simple mathematical operations to the packaging, giving a more gorgeous and advanced appearance. If you have not touched the matrix operation before, also do not panic, skip the matrix formula below, directly look at each of the following boldface formula can be. These formulas involve only high-school levels of addition and subtraction operations and trigonometric functions. I would move out of the matrix at the very beginning, and then I would avoid the matrix formula and explain the problem directly in an easy-to-understand way.

The matrix transformations supported in the earliest browsers may be in the SVG standard. There are also matrix transformations in the CSS 3 and HTML5 canvas with the dots on the graph, and of course the powerful flash and flex also have transformation matrices. Their rationale is the same. At present 2D matrix transformation already has many browsers to support, but the 3D transformation still takes time.

Said a half-day matrix transformation, in essence, an element can be rendered after rendering a bitmap, and then the bitmap on each point of the transformation, you can get a new bitmap, resulting in translation, scaling, rotation, shear and mirror reflection and other effects.

Basic formula

At present, whether it is SVG or CSS 3, or canvas,2d matrix transformation provides 6 parameters a B c D E F, its use of the basic formula is this:

where x and y are the initial coordinates of the element, X ' and Y ' are transformed by the matrix to obtain the new coordinates.
New coordinates can be obtained by applying transformations to the original coordinates through the 3x3 transformation matrix in the middle.

Attention! A b c d E F several parameters of the arrangement, is vertical row, there are many articles on the internet in the wrong direction.

According to the algorithm of matrix multiplication, the matrix equation above can be converted into the following two formulas

X ' =ax+cy+e
Y ' =bx+dy+f

In other words, don't look at the above there is a big lump of things, essentially the above two simple formula just. Later in the discussion, I'll focus on the two lines above and no longer involve the contents of the matrix.

Pan original position Pan 120px, 50px after

If the parameter matrix (1,0,0,1,tx,ty), or a=d=1,b=c=0, is provided when called, the above equation is simplified to

X ' = 1x+0y+tx = X+tx
Y ' = 0x+1y+ty = Y+ty

It is easy to see that this is the original x, y based on the translation, into a x+tx,y+ty point. Very simple. If mathematically speaking, TX and Ty are like Δx and Δy.

X ' = X+δx
Y ' = Y+δy

Transform:translate (TX, Ty) in CSS 3 is equivalent to Transform:matrix (1,0,0,1,tx,ty); Note that when using the matrix, you do not need units, the default is PX, and translate need units, It can be a unit such as PX and EM.

Scaling and stretching the original size 1.5 times times longer and wider

If the parameter matrix (sx,0,0,sy,0,0) is supplied when called, a or D is not equal to 1, such as A=sx,d=sy and b=c=e=f=0, the formula is simplified to

X ' = Sx*x+0y+0 = Sx*x
Y ' = 0x+sy*y+0 = Sy*y

It can be thought that this operation is actually to let x coordinates enlarge SX times, while y coordinates enlarge SY times.
This is primarily used to make the elements scale. If the SX and SY are greater than 1, then the magnification, and SX and Sy less than 1, is shrinking, if equal to 1, that is to maintain the original. Also, because the X and y directions are independent of each other, you can zoom in one Direction and zoom out in the other direction.
In the above example, I set the M and N to be 0.5, so the graph is half as long as the width. In addition, it is important to note that he is based on the center of the element as the base point of the scaling, not the upper left corner.
The Transform:scale (Sx, Sy) in CSS 3 is equivalent to Transform:matrix (sx,0,0,sy,0,0);

Rotate 37° in the original direction

Here is a relatively advanced, need to use some knowledge of trigonometric functions
If the parameter matrix (cosθ,sinθ,-sinθ,cosθ,0,0) is provided when called

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

Because in computer graphics, the right side is usually the x-axis positive direction, downward is the y-axis positive direction, so here θ represents the angle of the element clockwise rotation around the origin of the coordinates. The origin here is not the upper-left corner of the element, but the center point of the element.
In the example above, I rotated a div clockwise to 37°,cos37°=0.8,sin37°=0.6, so the matrix parameter provided is the matrices (0.8,0.6,-0.6,0.8,0,0)
In CSS 3, transform:rotate (37DEG) is equivalent to the one above me. Note that the angle in CSS 3 must be deg with a unit. The advantage is that you don't have to count the sin and cos values.

Shear X-Direction tilt 45°

Shear is the angle at which an element is tilted in a certain direction. The incoming parameters should be matrix (1,tan (Θy), tan (θx), 1,0,0)

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

The θx and θy represent the angle of the positive direction of the X and the direction of the Y, respectively, which are independent of each other. In the example above, I tilted the element in the x direction 45°, so his tan (θx) =1
Transform:skew (Θx,θy) in CSS 3 is equivalent to Transform:matrix (Tan (θx), 0,0,tan (θy), 0,0); If the use of skew, the direct use of the angle, but must be with the unit deg, such as the above example with a matrix written transform:matrix (1,0,1,1,0,0); equivalent to Transform:skew (45deg, 0);

Mirrored reflection mirror symmetric mirror symmetry

Mirror reflection means that an element mirrors a line in a symmetrical way. The most basic situation is that a line that passes through the origin can be reflected. Defines (ux,uy) the unit vector for the straight line direction. In other words, if the linear equation is y=kx, then ux=1/sqrt (1+k^2), uy=k/sqrt (1+k^2)
Then the parameters passed in for this mirror reflection change should be
Matrix (2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0)
So the final equation

X ' = (2*ux^2-1) *x+2*ux*uy*y
Y ' = 2*ux*uy*x+ (2*uy^2-1) *y

In the above example, the mirror symmetry of this line is y=2x. There is currently no simplified rule in CSS 3 that corresponds to it.

As for how to symmetry a line that is not yet the origin, you need to set the coordinates where the origin is located. Because by default, the origin coordinates are the center of this element, if you change the coordinates of the origin, you can change the symmetry of the line, of course, you can change the rendering of all the previous effects, CSS 3 using the Transform-origin method to modify the location of the coordinates origin.

Finally, if you want to play a higher point, buy this computer graphics is inevitable, this article is only a fur. I hope to be of some help to you.

CSS3 transformation matrices Needed in front-end development