CSS3 matrix matrices

Matrix transformation

Matrix (1,0,0,1,0,0) corresponds to matrix (a,b,c,d,e,f)

Where, representing all the coordinates (variables) of the transformation element, x y

The 1th value of each row of the 3*3 matrix is multiplied by the 1th value of the subsequent 1*3, and the 2nd value is multiplied by 2nd, 3rd and 3rd, and then added

ax+cy+eis the transformed horizontal coordinate, bx+dy+f which represents the vertical position after the transformation

offset : E---Horizontal offset distance f-----Vertical offset distance CSS3 unit px

Now, we offset the center point of the element based on this matrix, assuming that, that is (0, 0) x=0 , y=0 .

Assume x y offset 30px

1*0+0*0+ =y coordinate is bx0*0 +1*0+ =

Zoom :A---scale x horizontal d----scale y vertical CSS3 unit num

Assume that s represents scaling

X'  = ax+cy+e = S*x+0*y+0 = s*x;   Y'  = bx+dy+f = 0*x+s*y+0 = S*y;

i.e. matrix (SX, 0, 0, sy, 0, 0), equal to scale (SX, SY);

stretch : b---extrude y vertical C-----extrude x horizontal CSS3 unit radian Angle

Matrix (1, tan (θy), tan (θx),1,0,0);

tanvaly  = math. tan (deg * math. PI /180); 
 tanvalx = math.< span class= "operand" >tan (deg * math. PI /180);        

x '
Y'  = X*tan (θy) +y+0 = X*tan (θy) +y

Corresponds to skew(θx + "deg"，θy+ "deg") this notation

rotation : a b C D 4 values CSS3 units radians angle

Matrix (cosθ,sinθ,-sinθ,cosθ,0,0)

cosval  = math. cos (deg * math. PI /180)  sinval = math. Sin (deg * math. pi /180    

x ' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
Y'  = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

Angle
Cos=math.cos (* math.pi/180);
Inverse trigonometric function

rotate(θdeg)This form of writing is matrix much simpler, first memory simple, second, no calculation. For example, rotate 30°

matrixThe expression is also calculated cos , the sin value: Transform:matrix (0.866025,0.500000,-0.500000,0.866025,0,0);

CSS3 Direct: Transform:rotate (30DEG);

Mirror symmetry effect:

The point around the axis is the center of the transformation in the CSS3 transform , naturally, mirror symmetry is no exception. Because the axis always passes through the origin, arbitrary axes of symmetry can be y = k * x represented

The matrix expression is:

Matrix ((1-k*k)/(1+k*k), 2k/(1 + k*k), 2k/(11)/(10
     0)

For example, already y=kx , and know the point (x, y) coordinates, to find the coordinates of the symmetric point (x ', y ')?

Very simple, one is vertical, the second is the center point on the axis, so there are:

(y-y')/(x-x') =-1/k→ky-ky'  =-x+x' //Two straight lines perpendicular to each other with negative slope Countdown   + x')/2 * k = (y + y')/2 →kx+kx'  = y+y  '

Very simple, put x‘ and y‘ put forward, there are:

X'  = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y; Y'  = 2k/(k*k+1) *x + (k*k-1)/(k*k+1) *y;

And then combine the matrix formula:

X'  = ax+cy+e; Y'  = bx+dy+f;

We can get:

A = (1-k*k)/(k*k+1= 2k/(k*k+1= 2k/(k*k+1= (k*k-1 )/(k*k+1);

This is the parameter value in the Matrix method above!

Matrices in 3D transformations

The matrix is changed from 3*3 to 4*4, 9 to 2D, plus a z-axis.

Matrix3D (SX, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

Perspective: Perspective---How far away the image looks

If the parent element is perspective:200px, (because the element goes away, our eyes will be smaller); translateZ the larger the value, the larger the element, when the translateZ value is very close to 200 pixels, but not more than 200 pixels (such as 199 pixels), The size of the element will fill the entire screen (if the parent element does not have a overflow:hidden-like limit).

Perspective-origin eye position, the default is to see the stage or the center of the element, the value is: Left center right length%; Perspective-origin: x-axis y-axis;

Transform-style:preserve-3d represents 3D Perspective

Backface-visibility:hidden; Subsequent elements are not visible

CSS3 matrix matrices