Conversion matrix used in front-end development of CSS3, css3 Matrix

Conversion matrix used in front-end development of CSS3, css3 Matrix

I have been thinking about the blog about matrix transformation for a long time. Today I saw a blog written by winter, CSS3: mathematical principles behind transform and transition. Note: The following Demonstration content must be supported by modern browsers. For example, Chrome/Firefox/Opera. The demo cannot be seen in the reader.

Matrix is the content of linear algebra. It is used for matrix transformation in computer graphics. Previously, for front-end work, matrix transformation was hardly used. However, with the development of browsers and the popularization of HTML5 and CSS3, there are more and more front-end operations. Therefore, matrix transformation also appears in the field of view.

Matrix Transformation sounds like a very advanced thing. In essence, it is simply to package a series of simple mathematical operations to give a more gorgeous and advanced appearance. If you haven't touched matrix operations before, you don't have to worry about it. Skip the matrix formula below and simply look at the bold formulas behind each line. These formulas only involve the addition and subtraction operations and trigonometric functions at the high school level. In addition to the matrix that I moved out at the beginning, I will avoid the matrix formula in subsequent discussions and explain the problem in an easy-to-understand way.

The matrix transformations supported by the earliest browsers may be in the SVG standard. After that, CSS 3 with vertices and HTML5 Canvas also have matrix transformations. Of course, the powerful Flash and Flex also have transformation matrices. Their basic principles are the same. Currently, many browsers support 2D matrix transformation, while 3D transformation takes a few days.

After half-day matrix transformation, in essence, after an element is rendered, a bitmap can be obtained, and each point on the bitmap can be transformed to obtain a new bitmap, this results in effects such as translation, scaling, rotation, shear, and image reflection.

Basic Formula

Currently, both SVG, CSS 3, Canvas, and 2D matrix transformations provide six parameters a B c d e f. The basic formula is as follows:

Here, x and y are the first coordinates of the element, and X' and y' are the new coordinates obtained after matrix transformation.
Through the 3×3 transformation matrix in the middle, apply the transformation to the original coordinates to obtain the new coordinates.

Note! A B c d e f parameters are arranged in a vertical manner, and many articles on the Internet are incorrectly arranged.

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

x’=ax+cy+e
y’=bx+dy+f

That is to say, although there are so many things above, they are essentially the two simple formulas above. In the subsequent discussions, I will discuss the above two rows, instead of the matrix content.

Translate the original position 120px, after 50px

If the matrix (, tx, ty) parameter is provided, that is, a = d = 1, B = c = 0, the formula above is simplified

x’ = 1x+0y+tx = x+tx
y’ = 0x+1y+ty = y+ty

It is easy to see that the original x and y are translated to x + tx, y + ty points. Very simple. In mathematics, 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 (, tx, ty). Note that no unit is required when matrix is used, the default is px, while the translate requires units, which can be px, em, and so on.

Zoom and stretch original size up to 1.5 times in length and width

If the matrix (Sx, Sy,) parameter is provided, that is, a or d is not equal to 1, for example, a = Sx, d = Sy and B = c = e = f = 0, so the formula is simplified

x’ = Sx*x+0y+0 = Sx*x
y’ = 0x+Sy*y+0 = Sy*y

It can be imagined that this operation actually expands the x coordinate by Sx times, while the y coordinate by Sy times.
This is mainly used to scale the elements. If Sx and Sy are greater than 1, they are amplified. If Sx and Sy are smaller than 1, they are reduced. If they are equal to 1, they are kept as they are. In addition, because the x and y directions are independent of each other, you can zoom in one direction and in the other.
In the above example, the m and n I set are both 0.5, so the image length and width are halved. In addition, it is worth noting that it uses the center of the element as the base point for scaling, rather than the upper left corner.
Transform: scale (Sx, Sy); In CSS 3 is equivalent to transform: matrix (Sx, Sy );

Rotate 37 ° in original direction

What we use here is relatively advanced, and we need to use some knowledge of trigonometric functions.
If the matrix (cos θ, sin θ,-sin θ, cos θ,) parameters are provided during the call)

x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

In computer graphics, the right is usually the positive direction of the X axis, and the downward direction is the positive direction of the Y axis, so here θ indicates the angle from which the element rotates clockwise around the coordinate origin. The origin here is not the upper left corner of the element, but the center point of the element.
In the above example, I rotate a div by 37 ° clockwise, cos37 ° = 0.8, sin37 ° = 0.6, so the provided matrix parameter is matrix (0.8, 0.6, -0.6, 0.8)
In CSS 3, transform: rotate (37deg) is equivalent to the transform above. Note that the angle in CSS 3 must contain deg. The advantage is that you do not need to calculate the sin and cos values yourself.

Shear x skew 45 °

Shear means to tilt an element to a certain angle. The input parameters should be matrix (1, tan (θ y), tan (θ x), 0)

x’ = x+y*tan(θx)+0 = x+y*tan(θx)
y’ = x*tan(θy)+y+0 = x*tan(θy)+y

Here, θ x and θ y represent the angle of inclination to the positive direction of x and to the positive direction of y, respectively. The two are independent of each other. In the above example, I tilted the element 45 ° to the x direction, so his tan (θ x) = 1
Transform: skew (θ x, θ y) In CSS 3; is equivalent to transform: matrix (tan (θ x), tan (θ y ); if skew is used, the angle can be used directly, but the unit deg must be included. For example, if the matrix is used in the preceding example, transform: matrix (,) is equivalent to transform: skew (45deg, 0 );

Image reflection image symmetric image

Image reflection refers to the image symmetry of an element on a straight line. The most basic condition is that a line passing through the origin can be reflected. Defines (ux, uy) as the unit vector in the straight line direction. That is to say, if the linear equation is y = kx, then ux = 1/sqrt (1 + k ^ 2), uy = k/sqrt (1 + k ^ 2)
The input parameter for this image reflection change should be
Matrix (2 * ux ^ 2-1 * 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 image is symmetric for the line y = 2x. There are no simplified rules in CSS 3.

As for how to symmetric a line that does not match the origin, you need to set the coordinates of the origin. By default, the origin coordinate is the center of this element. If the coordinate of the origin is changed, the symmetric straight line can be changed. Of course, the rendering method of all the preceding effects can also be changed, use the transform-origin method in CSS 3 to modify the position of the coordinate origin.

Finally, if you want to enjoy a higher level, it is inevitable to buy a book on computer graphics. This article is just a piece of cake. Hope to help you.