CSS Matrix transformation principle

CSS Matrix transformation principle

Matrix multiplication

Also called "dot product",

AxB=C
The algorithm is as follows

rule:

  1. When the number of columns in A is equal to the number of rows in B, A and B can be multiplied
  2. The number of rows in C is equal to the number of rows in A, and the number of columns in C is equal to the number of columns in B, that is, AC has the same height and BC has the same width.
  3. C(m,n) = A(m,1) x B(1,n) + A(m,2) x B(2,n) + ...

What's the use of this stuff?

Suppose we have a 1x1 square with the lower left corner exactly at the origin:

I want to enlarge it twice and become like this:

What should I do?

[xy][2002]=[2x+0y0x+2y]=[2x2y]\begin{bmatrix} x & y/end{bmatrix}/begin{bmatrix} 2 & 0\0 & 2/end{bmatrix} =/begin{bmatrix} 2x+0y & 0x + 2y/end{bmatrix} =/begin{bmatrix} 2x & 2y/end{bmatrix}

  • (1,1) => (2,2)
  • (1,0) => (2,0)
  • (0,1) => (0,2)
  • (0,0) => (0,0)

x

[xy][2001]=[2xy]\begin{bmatrix} x & y/end{bmatrix}/begin{bmatrix} 2 & 0\0 & 1/end{bmatrix} =/begin{bmatrix} 2x & y/end{bmatrix}

  • (1,1) => (2,1)
  • (1,0) => (2,0)
  • (0,1) => (0,1)
  • (0,0) => (0,0)

[2 x 001 y ]\begin{bmatrix} 2 x & 0\0 & 1 y/end{bmatrix}

x y

[xy][2101]=[2xx+y]\begin{bmatrix} x & y/end{bmatrix}/begin{bmatrix} 2 & 1\0 & 1/end{bmatrix} =/begin{bmatrix} 2x & x+y\\end{bmatrix}

  • (1,1) => (2,2)
  • (1,0) => (2,1)
  • (0,1) => (0,1)
  • (0,0) => (0,0)

1 x y y x + y

0 y x

[xy][2011]=[2x+yy]\begin{bmatrix} x & y/end{bmatrix}/begin{bmatrix} 2 & 0\1 & 1/end{bmatrix} =/begin{bmatrix} 2x+y & y\\end{bmatrix}

  • (1,1) => (3,1)
  • (1,0) => (2,0)
  • (0,1) => (1,1)
  • (0,0) => (0,0)

x y 45

[x x y x x y y y ]\begin{bmatrix} x x & y x/x y & y y/end{bmatrix}

[x=>x y=>x x=>y y=>y ]\begin{bmatrix} x=>x & y=>x/x=>y & y=>y/end{bmatrix}

(x,y)

[x=>x y=>x x=>y y=>y x y ]\begin{bmatrix} x=>x & y=>x/x=>y & y=>y/x & y/end{bmatrix}

x y

A B A B

B A x y 1

[xy1][10011010]=[x+10y+10]\begin{bmatrix} x & y & 1/end{bmatrix}/begin{bmatrix} 1 & 0\0 & 1/10 & 10/end{bmatrix} =/begin{bmatrix} x+10 & y+10\\end{bmatrix}

(x,y,1) (x+10,y+10) B

[xy1][10001010101]=[x+10y+101]\begin{bmatrix} x & y & 1/end{bmatrix}/begin{bmatrix} 1 & 0 & 0\0 & 1 & 0\10 & 10 & 1/end{bmatrix} =/begin{bmatrix} x+10 & y+10 & 1\\end{bmatrix}

(x,y,1) (x+10,y+10,1) x y 10

45

x y sin/cos 3x3

(x,y,z) 4x4

CSS Matrix 3D