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

## “Android” detailed and comprehensive access process based on vue2.0weex (Android perspective)

This article is from Lu Fei, the Android team of ShangzhuangPublished in GitHub blog, welcome to subscribe! 1、 Say what’s in front of you At present, weex has launched a common order management page on Daren store app under makeup. So far, no problems have been found on Android, and the rendering time is between […]