Detailed Explanation of the Use of CSS3 Matrix

Time:2019-10-7

Change of CSS3 matrix. Application format is:


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

Corresponding to:

The transformation in practical application is:

Among them:

Ax + CY + e = abscissa

BX + dy + F = ordinates

Why 001 more? Because, in order to collect parameters.

Translate matrix

The basic format is:

Transform: matrix (1, 0, 0, 1, X, Y); // / X transverse translation, Y longitudinal translation

Scale matrix

The matrix of scale is also very simple.

// zoom the X axis A times.
// zoom the Y axis B times.
matrix(A, 0, 0, B, 0,0);

Of course, if you write numbers in the last two bits, it means scaling and translating.

// Get: X axis = 0.3*x + 100
// Get: Y axis = 0.2*x + 200
matrix(0.3,0,0,0.2,100,200);

Rotate matrix

Rotate actually has a lot to do with triangular functions. First, determine your rotation angle (clockwise rotation). Then, calculate sin theta and cos theta. The final matrix formula is:

Matrix (cos theta, sin theta, -sin theta, cos theta, 0,0)// is cs-sc

Skew matrix

The skew matrix is also a trigonometric function, but tantheta is used.

// Tilt the Y-axis X-axis to A degrees
// Inclined the X-axis Y-axis to B degrees
matrix(1,tan(A),tan(B),1,0,0)

3D Transform Matrix

The 3-D transformation is a 4*4 matrix. It’s similar to the 2-D transformation, except that there’s an extra Z. / / this is the scaling 3D matrix.

 

The corresponding CSS is written as follows:


transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.