The basic concept

The transform property value in the CSS is one or more transform-function values. For two-dimensional transformations, transform-function includes scale, rotate, Translate, skew, and matrix. We’re only dealing with two dimensional transformations. Matrix is the most basic function. In fact, other functions can be replaced by matrix. Let’s look at the other four functions besides matrix.

These four functions can be divided into two categories. Scale, rotate and Skew belong to linear transformation. The so-called linear transformation can be interpreted as the transformation of any straight line on the plane after the origin remains unchanged. Only Translate is not a linear transformation, because it moves the origin.

Scale, rotate, and Translate are intuitive to understand. They are simply zooming, rotating, and translating. But it’s easy to overlook the point at which scaling and rotation takes place. As a rule of thumb, the origin is the center of the element (50%, 50%), which is also the default. But you can actually set it to transform-origin.

For 99% of scenarios, knowing scale, rotate, and Translate is sufficient, and transform-Origin is not even necessary. However, for a deeper understanding of Transform, let’s move on.

What is skew ()

Let’s start with the definition of an MDN document:

The skew() function defines the skew conversion of an element on a two-dimensional plane

After seeing a head confused water, what is called tilt? What’s the difference between tilt and rotation? And then it goes on:

This transformation is a shear mapping (crosscutting) that twists each point within a cell by an Angle horizontally and vertically.

This is more abstract, what does it mean to twist an Angle?

Let’s start with the syntax: Skew (ax, ay), which takes two parameters, one for the Angle at which the element is distorted along the x-coordinate and the other for the y-coordinate. Or you can break it down, so skew(ax, ay) is equal to skewX(ax) and skewY(ay). To understand SKEw, you need to understand the corresponding relationship between the parameters Ax and AY and the coordinate transformation of elements, which is the process of “distortion”.

First draw a div with a length and width of 100px, take transform-Origin as the origin, and establish the Cartesian coordinate system. As mentioned earlier, the default value for transform-Origin is the center point of the element (50%, 50%). Draw two more red lines, representing the X-axis and Y-axis of the coordinate system. The crossing point of the red lines is the origin of the coordinates, as shown below:

Using the transform: skewX (45 deg); :

The dashed line is before the transformation. As you can see, skewX actually keeps the y coordinate unchanged and moves the x coordinate by a certain distance. Let’s say some point is A before it moves, and B after it moves. A is drawn perpendicular to the x axis at the intersection of C, and CA is rotated 45 degrees counterclockwise at the origin of C. B lies on the rotated line. SkewY uses the same calculation but moves the y coordinate.

Skew is the movement of each point in the x – or Y-axis on the premise of linear transformation. The effect of rotation can be achieved if the two axes of an element are offset by an appropriate Angle. For example, transform: Skew (45DEg, -45DEg); :

The effect of the rotation is to increase the volume. Skew (45deg, -45deg) scale(0.75); skew(45deg, -45deg) scale(0.75); , the effect is as follows:

This and the transform: the rotate (45 deg); The effect is consistent.

Understand matrix ()

The syntax of the matrix function looks like this

matrix(a, b, c, d, tx, ty)
Copy the code

Where a, B, C, and D respectively represent functions scaleX(), skewY(), skewX(), and scaleY(), which together represent a linear transformation.

Tx and TY represent shifts, representing translateX() and translateY() respectively.

For example transform: matrix(1, 0, 0, 1, 10, 10); Transform: Translate (10px, 10px); Since skew is 0 and scale is 1, only the last two parameters matter. Transform: matrix(2,0,0,2,0,0); Equivalent to transform: scale(2); . The skew or Rotate effect is a bit more complicated, but the method also changes the corresponding parameters. Rotate can be implemented using skew and scale, so it’s easy to guess what parameters a, B, C, and D are used to implement rotate. The six parameters of matrix include scale, Skew, Translate, and rotate. This is why matrix can replace other two-dimensional transformation methods and achieve more complex transformations through different parameter combinations. This is the perceptual cognition of Matrix.

Next, the matrix is analyzed from a mathematical perspective

Suppose we represent points in the plane in terms of the endpoints of vectors, that is, the vectors (x, y) represent points (x, y). Two basis vectors I (1, 0) and j(0, 1) are determined in the coordinate system. Then any point in the plane coordinate can be represented by g* I + h*j, where G and h are any real numbers:


( x . y ) = g ∗ i + h ∗ j = ( g . h ) (x, y) = g*i + h*j = (g, h)

According to the formula, as long as the basis vectors I and j are determined, then the coordinates of a point can be determined by g and h. And the reason why we set our initial basis vector to be I (1, 0) and j(0, 1) is, then g times I plus h times j is equal to g, h, and we can represent a point in terms of g, h.

If the basis vector is any value I (a, b), j(c, d), then the calculation formula is


( x . y ) = g ∗ i + h ∗ j = ( a ∗ g + c ∗ h . b ∗ g + d ∗ h ) (x, y) = g*i + h*j = (a*g + c*h, b*g + d*h)

There are many points in the plane graph, (g, h), (k, L), (m, n)…. If you take a linear transformation of a graph, according to the formula above, if you change the basis vectors I and j, then the coordinates of all the points will change. Without the need to change the coordinates of each point, namely (g, h), (k, L), (m, n)…. It stays the same.

So a linear transformation can be represented by the coordinates of the basis vectors I (a, b) and j(c, d). The I, j coordinates have exactly four numbers representing the first four parameters of the matrix. Transform: matrix(1, 0, 0, 1, 0); transform: matrix(1, 0, 0, 1); transform: matrix(1, 0, 0, 1); transform: matrix(1, 0, 0, 1); transform: matrix(1, 0, 0, 1); It’s not going to transform, because 1,0,0,1 is officially the basis vector coordinates before the initial transformation. To facilitate the calculation, write these four parameters in a 2 by 2 matrix, representing a linear transformation on a two-dimensional plane.

Multiple linear transformations applied in sequence multiply matrices. But the matrix has the last two parameters, and if you add these two parameters it becomes a 2 by 3 matrix, which you can’t multiply. So let’s put it together as a 3 by 3 matrix for easy calculation:

In this calculation, the last row of the matrix is negligible. Therefore, for any point (x, y), the coordinates of matrix(a,b,c, D,e,f) transformation are


( a x + c y + e . b x + d y + f ) (ax + cy + e, bx + dy + f)

Note: This is recommended for linear algebra tutorials