CSS matrix function

matrix() yes CSS Of transform A basic property of , It can realize many advanced 、 Complex effects , actually transfrom Of translate、rotate And so on matrix Based on the implementation of a simplified version of the syntax .

Fundamentals of linear algebra

To understand and use, you must be familiar with vector and matrix knowledge of Linear Algebra , The course of linear algebra that I studied at the beginning has long been returned to the teacher , Because I don't know what's the use , If you know you'll use it today , I will study linear algebra well at the beginning 、 Advanced mathematics courses .

（1） vector

Vectors are used to describe direction and size , Cartesian coordinate system is generally used to describe vectors , Like vector (2, 1) and (3, 3) In the coordinate system, it is expressed as follows ：

Addition of vectors 、 Both subtraction and multiplication are operations on the coordinates of the corresponding position ：

(8, 2) + (2, 6) = (8 + 2, 2 + 6) = (10, 8)

(8, 2) - (2, 6) = (8 - 2, 2 - 6) = (6, -4)

(8, 2) * (2, 6) = (8 * 2, 2 * 6) = (16, 12)

 Copy code 

（2） matrix

Matrix is a common tool in advanced algebra , Arrange the numbers in a rectangular array , It is convenient for higher mathematical operations such as statistical analysis , One 2 X 3 That is to say, this matrix has 2 That's ok 3 Column

When adding matrices of the same size , Is the sum of the corresponding positions ：

When matrices multiply , The corresponding position of each row of the former matrix will be multiplied by the corresponding position of each row of the latter matrix , And then add up the results , The number of rows of the resulting matrix is equal to the number of rows of the left matrix , The number of columns is equal to the number of columns of the matrix on the right , for example

matrix Method

CSS3 Medium transfrom Of matrix() The method is as follows ：

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

There are six parameters , It corresponds to a 3*3 Matrix , The writing direction is vertical ：

During coordinate transformation （2D coordinate ）, Suppose the coordinates of the target point are (x, y), Then the conversion formula is as follows ：

The first and second rows of the new matrix are the transformed abscissa and ordinate .

It should be noted that transfrom-origin This property is the origin of the deformation , It will affect the calculation of point coordinates , Our gang will set it to 0 0

Example

Suppose there is such an element ,CSS Properties are as follows ：

#transformedObject {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 80px;
}
 Copy code 

At this time, the page effect is as follows ：

Let's do... On this element transform: matrix() Transformation of ：

#transformedObject {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 80px;
  transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
  transform-origin: 0 0;
}
 Copy code 

Notice that we set up transform-origin

Conduct matrix The principle of operation is the same as that mentioned above , With (200, 80) For example ：

The effect of applying the transformation is as follows ：

Add a link to online editing ：www.useragentman.com/matrix/#

matrix Relationship with other attributes

matrix Is the most basic change , It has six parameters , These six parameters give special values , Can be realized translate/rotate And other special effects ：

With translate distance , When the coordinate point is (10px, 10px), Conduct translate(50px 50px) When , The coordinates of the result will be (60px, 60px)

If you use matrix() Make changes , According to the picture above , The parameters that need to be given are matrix(1, 0, 0, 1, 50, 50), The process of performing an operation ：

1 0 50     10     1 * 10 + 0 * 10 + 50 * 1     60
0 1 50  *  10  =  0 * 10 + 1 * 10 + 50 * 1  =  60
0 0 1      1      0 * 10 + 0 * 10 + 1  * 1     1
 Copy code 

The result is the same .

Yes matrix With understanding , You can use matrix At the same time 、 Compound change , Thus, more complex animation can be realized .

Reference resources

• matrix()@MDN
• 【css Basics 】 How to understand transform Of matrix() usage @ Nuggets
• understand CSS3 transform Medium Matrix( matrix )@ Zhang Xinxu's personal homepage