# CSS matrix function

2022-04-29 16:27:15

`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 .