Change of CSS3 matrix. Application format is:
The transformation in practical application is:
Ax + CY + e = abscissa
BX + dy + F = ordinates
Why 001 more? Because, in order to collect parameters.
The basic format is:
Transform: matrix (1, 0, 0, 1, X, Y); // / X transverse translation, Y longitudinal translation
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 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
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.