Transformation matrix needed in CSS3 front-end development_html/css_WEB-ITnose

I have been thinking about writing a blog post about matrix transformation for a long time. Today I saw a blog written by winter: CSS3: The mathematical principles behind transform and transition, which prompted this article. Note that the following demo content requires modern browser support. Such as Chrome/Firefox/Opera. The demo cannot be seen in the reader.

Matrix is ​​the content of linear algebra, and is used for matrix transformation in computer graphics. In the past, matrix transformations were rarely used for front-end work. However, with the advancement of browsers and the popularization of HTML5 and CSS3, more and more things can be operated on the front end, so matrix transformation also appears in the field of vision.

Matrix transformation sounds like a very advanced thing, but in fact it is essentially just a series of simple mathematical operations packaged up to give it a more gorgeous and sophisticated appearance. If you have never been exposed to matrix operations before, don't panic. Skip the matrix formulas below and just look at the boldface formulas behind each item. These formulas involve only high school level addition, subtraction and trigonometric functions. Except that I will move out the matrix at the beginning, in subsequent discussions I will avoid the formula of the matrix and directly explain the problem in an easy-to-understand way.

The earliest matrix transformation supported by browsers may be in the SVG standard. Later, CSS 3 with dotted graphics and Canvas of HTML5 also had matrix transformations. Of course, the powerful Flash and Flex also had transformation matrices. Their basic principles are the same. At present, 2D matrix transformation is supported by many browsers, but 3D transformation will take some time.

I have been talking about matrix transformation for a long time. In fact, in essence, after rendering an element, you can get a bitmap, and then transform each point on the bitmap to get a new bitmap. This produces effects such as translation, scaling, rotation, shear, and mirror reflection.

Basic formula

Currently, whether it is SVG, CSS 3, or Canvas, 2D matrix transformation provides 6 parameters a b c d e f. The basic formula is as follows:

Among them, x and y are the initial coordinates of the element, and x' and y' are the new coordinates obtained after matrix transformation.
Use the 3×3 transformation matrix in the middle to transform the original coordinates to get the new coordinates.

Attention! The parameters a b c d e f are arranged vertically. There are many articles on the Internet that are arranged in the wrong direction.

According to the operation rules of matrix multiplication, the above matrix formula can be transformed into the following two formulas

x'=ax cy e
y'=bx dy f

In other words, even though there is so much stuff on it, it is essentially just the two simple formulas above. In the subsequent discussion, I will focus on the above two lines and no longer touch on the contents of the matrix.

Translation

Original position

After translation 120px, 50px

If the parameter matrix(1,0,0 is provided when calling ,1,tx,ty), that is, a=d=1, b=c=0, then the above formula is simplified to

x' = 1x 0y tx = x tx
y' = 0x 1y ty = y ty

It is easy to see that here is a translation based on the original x, y, becoming x tx, y ty point That’s all. Very simple. Mathematically speaking, tx and ty are like Δx and Δy.

x' = x Δx
y' = y Δy

transform in CSS 3: translate(tx, ty); It is equivalent to transform: matrix(1,0,0,1,tx,ty); Note that when using matrix, no unit is required, and the default is px, while translate requires a unit, which can be a unit such as px or em.

Scale and stretch

Original size

Enlarge length and width by 1.5 times

If the parameter matrix(Sx, 0,0,Sy,0,0), that is, a or d is not equal to 1, such as a=Sx, d=Sy and b=c=e=f=0, so the formula is simplified to

x' = Sx*x 0y 0 = Sx*x
y' = 0x Sy*y 0 = Sy*y

As you can imagine, this operation actually The above is to expand the x coordinate by Sx times and the y coordinate by Sy times.
This is mainly used to make elements zoom. If Sx and Sy are greater than 1, it means it is enlarged, and if Sx and Sy are less than 1, it means it is reduced. If it is equal to 1, it means it remains the same. Moreover, since the x and y directions are independent of each other, you can zoom in in one direction and zoom out in the other.
In the above example, I set m and n to both 0.5, so the length and width of the graphic were each reduced by half. In addition, it is worth noting that he uses the center of the element as the base point for scaling, not the upper left corner.
Transform: scale(Sx, Sy); in CSS 3 is equivalent to transform: matrix(Sx,0,0,Sy,0,0);

Rotation

Original direction

Rotation 37°

What is used here is relatively advanced and requires some knowledge of trigonometric functions
If the parameter matrix is ​​provided when calling (cosθ,sinθ,-sinθ,cosθ,0,0)

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

Since in computer graphics, the right direction is usually the positive direction of the x-axis, and the downward direction is the positive y-axis direction, so θ here represents the angle of clockwise rotation of the element 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 above example, I rotated a div 37° clockwise, cos37°=0.8, sin37°=0.6, so the parameters of the matrix provided are matrix(0.8,0.6,-0.6,0.8,0,0 )
In CSS 3, transform:rotate(37deg) is equivalent to the transformation above. Note that angles in CSS 3 must have the unit deg. The advantage is that you don't have to calculate the sin and cos values ​​yourself.

Shear

Tilt 45° in the x direction

Shear is to tilt an element in a certain direction. angle. The parameters passed in 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 here represent the positive direction of x respectively and the angle tilted in the positive y direction, the two are independent of each other. In the above example, I tilted the element 45° in the x direction, so its tan(θx)=1
transform: skew(θx, θy); in CSS 3 is equivalent to transform: matrix(tan (θx),0,0,tan(θy),0,0); If you use skew, just use the angle directly, but it must have the unit deg. For example, if the above example uses a matrix, it is written as transform: matrix(1,0 ,1,1,0,0); Equivalent to transform: skew(45deg, 0);

Mirror reflection

Mirror symmetry

Mirror symmetry

Mirror reflection means that an element mirrors a certain straight line. The most basic case is that a straight line passing through the origin can be reflected. Define (ux, uy) as the unit vector in the straight line direction. That is to say, if the straight line equation is y=kx, then ux=1/sqrt(1 k^2), uy=k/sqrt(1 k^2)
Then the incoming mirror reflection changes The parameters 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, it is the mirror symmetry of the straight line y=2x. There is currently no simplified rule corresponding to this in CSS 3.

As for how to symmetry a line that does not reach the origin, you need to set the coordinates of the origin. Since by default, the origin coordinates are the center of this element, if you change the coordinates of the origin, you can change the symmetrical straight line. Of course, you can also change the presentation of all previous effects. In CSS 3, use the transform-origin method to modify the origin of the coordinates. Location.

Finally, if you want to play at a higher level, it is inevitable to buy a computer graphics book. This article only scratches the surface. Hope it helps.