Dachang technology adhere to the week more selected good articlesCopy the code

preface

Why math?

First, the next timeline:

  • Stumbled upon a treasure
  • While watching the video, I stumbled upon a set: the nature of linear algebra. It occurred to me that when I was in school, my teacher on matrix theory (linear algebra) always said that matrices were beautiful, but I never got them, so I was curious and wanted to have a look.
  • After watching part of it, I thought it was very interesting and wanted to share it with you
  • But does it work? I read in the comments that matrices are the foundation of graphics, so I googled it and found that it is much more useful than I thought! When it comes to graphics, matrices are inescapable, such as WebGL and so on;
  • But it doesn’t have much to do with most of our daily work at the front end. Would it be interesting to talk about it? Pure theory can explain clear? It occurred to me that the use of matrices in Transform was a good practical example
  • So far, I have found that matrices are both interesting and meaningful, and can also have practical examples (transform), hence this article.

This article will cover some of the most basic matrix operations, so some knowledge of linear algebra/matrix theory is required. Had learned to go only, forgot to have nothing to do with, clew a little bit impression to go!

Speak what?

Linear algebra is taught in almost every subject (science and engineering) : computer science, physics, electrical engineering, mechanical engineering, statistics, etc. We learned how to compute matrices: number times, cross times, eigenvalues, etc., but only for calculation. Will you have the following questions:

  • Why is the rule of calculation defined this way?
  • Why are we learning this?
  • What is the practical use of learning this?

In many of the courses that we take, you probably have this question, and it’s still unclear. For linear algebra, the purpose of today’s share is to try to answer these questions.

Linear algebra, we only learned how to calculate it, but what’s really more important is the geometry. Computation is just a tool to solve a problem, and understanding its geometric meaning helps us know what tools to use to solve what problems and how to interpret the meaning of the end result.

Well so much nonsense, mainly to stimulate your interest, I hope you do not feel boring because of the full formula, the content is not complicated is also very interesting. Of course it depends on me being able to communicate what I want to say, and I try to do that.

This paper is divided into two parts:

  • Part: The content is from the treasure up main linear algebra collection, mainly talks about some basic matrix operations of geometric meaning, I share according to my understanding, more wonderful recommend everyone to watch the original video
  • Two parts: Digest the content through the transform matrix.

Basic operation of matrix

If I just tell you how matrices represent geometry, most people can remember it and it’s a good application, but I want you to really understand why, so I’ll start with the basics.

Vectors and basic operations

The basis of matrices is vectors, so let’s look at vectors first. A vector is a different thing in different disciplines, and it can even be anything, as long as it’s guaranteedaddandThe number byJust make sense. Why do you just add and multiply, as I’ll explain in a moment: you can get to any point in space with just these two operations.A vector can be represented by 1, 2, 3
v \vec v
, represented as a
[ 2 3 ] \begin{bmatrix}-2\\3\\\end{bmatrix}
And are represented by an arrow in the coordinate system

add

  • Mathematics said \ [ab] begin {bmatrix} a \ \ b \ \ \ end {bmatrix} [ab] + [mn] \ begin {bmatrix} m \ \ n \ \ \ end [mn] = {bmatrix} [a + MB + n] \ begin {bmatrix} a + m + n \ \ \ \ \ b end {bmatrix} [a + MB + n], v ⃗ ⃗ \ \ vec vv + w vec ww = v ⃗ ⃗ \ vec v + + w \ vec wv + w.
  • Geometric representation:

Think of a vector as a motion, starting at the origin, going to
v \vec v
Length of directional movement
v \left| \vec v \right|
Later, then
w \vec w
Length of directional movement
w \left| \vec w \right|
PI, PI is the same thing as PI
v + w \vec v+\vec w
Length of directional movement
v + w \left| \vec v+\vec w \right|
.

Combining mathematical and geometric representations, we can see why the addition of vectors is defined this way:
[ a b ] \begin{bmatrix}a\\b\\\end{bmatrix}
+
[ m n ] \begin{bmatrix}m\\n\\\end{bmatrix}
=
[ a + m b + n ] \begin{bmatrix}a+m\\b+n\\\end{bmatrix}
.

The number by

  • Mv ⃗m\vec VMV = m[xy]m\begin{bmatrix}x\ y\ end{bmatrix}m[xy]= [mxmy]\begin{bmatrix}mx\\my\\ end{bmatrix}[mxmy]
  • Geometric representation:


v \vec v
When it is extended by a factor of 2 in its direction, it is equivalent to a factor of 2 in decibels on the x and y axes, i.e
m v m\vec v
=
m [ x y ] m\begin{bmatrix}x\\y\\\end{bmatrix}
=
[ m x m y ] \begin{bmatrix}mx\\my\\\end{bmatrix}
The definition.

Linear combination, span and basis

Now, there’s one thing that we used but didn’t notice when we were describing vectors: the basis for vectors. We’ve all assumed that the basis of the vector is going to be in the X-axis of the plane
i \vec i
And in the y direction
j \vec j
.We can multiply by these two bases
m v m\vec v
And I add
v \vec v
+
w \vec w
=
v + w \vec v+\vec w
We can get any vector in the plane, and these vectors are called the basis vectorsA linear combinationThe whole two-dimensional plane is under control.

So if we change the basis coordinates, does each pair of basis coordinates control the whole plane? It isn’t. When two basis vectors are exactly collinear, their linear combination is always going to be a line; And when both vectors are zero, their linear combination can only stay at the origin forever. (3:17-3:58)

www.bilibili.com/video/BV12s…

In terms of terminology, we call the set of vectors that can be represented as a linear combination of basis vectors the span of a given vector, and we know from what we just described that for most two-dimensional vectors, the span of a given vector is the entire two-dimensional plane, or in some cases a line or a point.

So how do we pick our basis vectors?

If a vector c⃗\vec cc can be obtained by multiplying and adding two vectors in the plane, a⃗\vec aa and b⃗\vec bb, it will not make any contribution to the span. A ⃗\vec aa, b⃗\vec bb, c⃗\vec cc can be removed at least one of them. Then we say that a, B, and c are linearly dependent. And at the same time we can conclude that a basis for a space vector is a linearly independent set of vectors that span that space.

And what we found is that just by multiplying and adding vectors, we can span the entire corresponding dimension, so we can reach any point in the corresponding dimension. Take a look at the span of three dimensions (7:49-8:09)

www.bilibili.com/video/BV12s…

Matrices and linear transformations

The vectors above are basic operations, and everything is just to get a better understanding of matrix operations.

Unfortunately, it’s hard to say what a matrix is, you have to see for yourself. – morpheus

The function turns an input into an output with some processing, such as y=f(x). The same is true of the vector operation a=L(b), so why don’t we call vector operations functions, instead of vector transformations/matrix transformations. This reminds us to think of vectors in terms of motion, or to put it another way, matrix/vector transformations are transformations of space.

Just to be clear, slightly simpler than functions, matrix changes are linear transformations (because they depend on multiplying and adding vectors).

  • The origin is not moving
  • A line is still a line

A linear transformation is one that makes grid lines parallel and equidistant. (2:39-3:51)

www.bilibili.com/video/BV1ns…

The video asks a question: for an input on the plane b⃗\vec bb, what formula L should we give the computer to get a⃗\vec aa =L(b⃗\vec bb)?

As mentioned above, I ⃗\vec II and j⃗\vec JJ are the simplest pair of bases that span a two-dimensional plane. Therefore, when following the transformation of a two-dimensional plane, we only need to focus on the linear transformation of this pair of bases, and we can obtain the linear transformation of the entire plane, namely formula L.

For instance,
i \vec i
into
[ 2 1 ] \begin{bmatrix}2\\1\\\end{bmatrix}
.
j \vec j
into
[ 3 2 ] \begin{bmatrix}3\\-2\\\end{bmatrix}
, the whole two-dimensional plane changes as follows:We put the two basis vectors in the matrix as follows, so this matrix right here
[ 3 2 2 1 ] \begin{bmatrix}3&2\\-2&1\\\end{bmatrix}
It represents a transformation of two dimensions, which is formula L, where the two columns are transformed
i \vec i
and
j \vec j
.

Matrix vector multiplication

It is important to understand that a matrix is a transformation of space in which the two columns are the transformed basis vectors I ⃗\vec II and J ⃗\vec jj. This is the basis for all subsequent operations.

Now, let’s answer the question above: If you want to know a vector
b \vec b
, such as
[ 5 7 ] \begin{bmatrix}5\\7\\\end{bmatrix}
, after a linear change, which is L(
b \vec b
), only need to calculate
5 i 5\vec i
+
7 j 7\vec j
=
5 [ 3 2 ] 5\begin{bmatrix}3\\-2\\\end{bmatrix}
+
7 [ 2 1 ] 7\begin{bmatrix}2\\1\\\end{bmatrix}
Can.Abstract afterStop and feel…..

A vector [xy]\begin{bmatrix}x\\y\\ end{bmatrix}[xy] is multiplied by A matrix A\mathbf{A}A. The position of this vector in the new space (transformed by the matrix A\mathbf{A}A).

Matrix multiplication

A matrix is a transformation of a space, but what if we want to transform the space multiple times in succession?

At this point, instead of describing the direction of a specific vector [xy]\begin{bmatrix}x\\y\end{bmatrix}[xy], we’ll describe the transformation of the entire plane, and you can watch the video for more details.

M1\mathbf{M{_1}}M1= [efgh]\begin{bmatrix}e&f\ g&h\\ end{bmatrix}[egfh] : I ⃗\vec ii transform to [eg]\begin{bmatrix}e\\g\\ end{bmatrix}[eg], j⃗\vec jj transform to [fh]\begin{bmatrix}f\ h\ end{bmatrix}[fh], Then perform a M2\mathbf{M{_2}}M2= [ABCD]\begin{bmatrix}a&b\ c&d\\ end{bmatrix}[ACbd] transformation.

At this point I ⃗ \ vec ii will transform into M2i ⃗ = (abcd) ⃗ I = [abcd] [eg] = [bd] [ac] + g = e/ae + bgce + dg \ mathbf {_2} {M} \ vec i=\begin{bmatrix}a&b\\c&d\\\end{bmatrix}\vec i= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}e\\g\\\end{bmatrix}=e\begin{bmatrix}a\\c\\\end{bmatrix}+ g\begin{bmatrix}b\\d\\\end{bmatrix}=\begin{bmatrix}ae+bg\\ce+dg\\\end{bmatrix}M2i =[acbd]i =[acbd][eg]=e[ac]+g[bd]=[ae+bgce+dg]

At this time
j \vec j
Translates to
M 2 j = [ a b c d ] j = [ a b c d ] [ f h ] = f [ a c ] + h [ b d ] = [ a f + b h c f + d h ] \mathbf{M{_2}} \vec j= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\vec j= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}f\\h\\\end{bmatrix} = f\begin{bmatrix}a\\c\\\end{bmatrix}+ h\begin{bmatrix}b\\d\\\end{bmatrix}=\begin{bmatrix}af+bh\\cf+dh\\\end{bmatrix}
The above process also leads to the matrix multiplication definition, i.e


M 2 M 1 = [ a b c d ] [ e f g h ] = [ a b c d ] [ e g ] + [ a b c d ] [ f h ] = [ a e + b g a f + b h c e + d g c f + d h ] \mathbf{M{_2}} \mathbf{M{_1}}= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}e&f\\g&h\\\end{bmatrix}=\begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begi n{bmatrix}e\\g\\\end{bmatrix}+\begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}f\\h\\\end{bmatrix}=\begin{bmatrix}ae +bg&af+bh\\ce+dg&cf+dh\\\end{bmatrix}

The whole process above, we learn matrix multiplication is directly memorized, and after understanding its geometric meaning, I hope you can think about the geometric meaning behind it every time you use it — multiple successive transformations of space, so that you will have a better understanding of the matrix.

Associative and commutative properties of multiplication

If you remember, matrices are associative of multiplication, not commutative of multiplication. Why is that? We can understand the reason very well by means of geometric meaning.

  • Associative law: M3M2M1 \ mathbf {_3} {M} \ mathbf {_2} {M} \ mathbf {_1} {M} M3M2M1? = M3(M2M1) \mathbf{M{_3}}(\mathbf{M{_2}} \mathbf{M{_1}} )M3(M2M1)

M1mathbf {M{_1}}M1, m2mathbf {M{_2}}M2, m3mathbf {M{_3}}M3

Mathbf {M{_1}} M2 mathbf{M{_2}}M2 mathbf{M{_2}}M2 mathbf{M{_1}} M2 Then M3\mathbf{M{_3}}M3 transformation is performed

It is obvious that there is no difference or even no need to prove it.

  • Commutative law: M2M1\mathbf{M{_2}} \mathbf{M{_1}}M2M1? = M1M2\mathbf{M{_1}} \mathbf{M{_2}} M1M2

Mathbf {M{_1}}M1, then mathbf{M{_2}}M2

Mathbf {M{_2}}M2, then m1mathbf {M{_1}}M1

Words are hard to describe, let’s watch the video (7:38-8:13)

www.bilibili.com/video/BV1ms…

We don’t have to prove it numerically, we just have to imagine it in our head, to know that the commutative law is not true, that the order of transformations in space is not arbitrary. Of course, numerical calculation can also easily reach this conclusion:


M 2 M 1 = [ a b c d ] [ e f g h ] = [ a b c d ] [ e g ] + [ a b c d ] [ f h ] = [ a e + b g a f + b h c e + d g c f + d h ] \mathbf{M{_2}} \mathbf{M{_1}}= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}e&f\\g&h\\\end{bmatrix}= \begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bmatrix}e\\g\\\end{bmatrix}+\begin{bmatrix}a&b\\c&d\\\end{bmatrix}\begin{bm atrix}f\\h\\\end{bmatrix}=\begin{bmatrix}ae+bg&af+bh\\ce+dg&cf+dh\\\end{bmatrix}


M 1 M 2 = [ e f g h ] [ a b c d ] = [ e f g h ] [ a c ] + [ e f g h ] [ b d ] = [ e a + c f e b + d h g a + h c e b + g d ] \mathbf{M{_1}} \mathbf{M{_2}}= \begin{bmatrix}e&f\\g&h\\\end{bmatrix}\begin{bmatrix}a&b\\c&d\\\end{bmatrix}= \begin{bmatrix}e&f\\g&h\\\end{bmatrix}\begin{bmatrix}a\\c\\\end{bmatrix} +\begin{bmatrix}e&f\\g&h\\\end{bmatrix}\begin{bmatrix}b\\d\\\end{bmatrix}=\begin{bmatrix}ea+cf&eb+dh\\ga+hc&eb+gd\\\end{ bmatrix}

So obviously they’re not equal, and you can plug in the numbers, and they’re not equal. Matrices operate from right to left, which may not be very conventional. But consider that matrix operations are simply operations on space, combined with the composition of f(g(x)) : first compute g(x), then compute f(g(x)), it is not difficult to understand.

The determinant

In fact, what I have talked about is enough to explain the geometric meaning of matrix, and the subsequent transform only needs the above understanding. However, I would like to continue to pick out another concept briefly to explain that other concepts of matrix also have their corresponding practical (geometric) meaning.

If you remember, the determinant is calculated as det([abcd])det(\begin{bmatrix}a&b\ c&d\\ end{bmatrix})det([ACbd])= ad-bc. What does this mean? Let’s look at it step by step.

  • Assume that both C and B are 0, then the space transformation corresponding to the matrix is: I ⃗\vec ii becomes ai⃗a\vec iai, j⃗\vec jj becomes DJ ⃗d\vec JDJ, Is det ([abcd]) det (\ begin kathi Jones from a&b \ \ c&d \ {bmatrix} {bmatrix} \ \ end) det ([acbd]) = Det ([a00d])det(\begin{bmatrix}a&0\\0&d\\ end{bmatrix})det([a00d]) = AD.

  • If b is not 0, then I ⃗\vec ii becomes ai⃗a\vec iai, j⃗\vec jj becomes ai⃗+ DJ disk a\vec I +d\vec jai + DJ, which becomes a parallelogram from the plane view. Computing det ([abcd]) det (\ begin kathi Jones from a&b \ \ c&d \ {bmatrix} {bmatrix} \ \ end) det ([acbd]) = Det ([ab0d])det(begin{bmatrix}a&b\\0&d\\ end{bmatrix})det([a0bd]) = AD,

  • Then I ⃗\vec II changes to ai⃗+cj⃗a\vec I +c\vec jai +cj, j⃗\vec jj changes to ai disk + DJ dae \vec I +d\vec jai + DJ. Det ([abcd]) det (\ begin kathi Jones from a&b \ \ c&d \ {bmatrix} {bmatrix} \ \ end) det ([acbd]) = (a + b) (c + d) – ac – bd – 2 BC = AD – BC, just base vector into the area of the after transformation.

So, the determinant of the matrix is:The scaling factor of a plane unit area after a matrix transformation.

For the equation det(m2m1mathbf {M{_2}} M2M1)=det(M2 mathbf{M{_2}}M2)det(M1 mathbf{M{_1}}M1) Explain it in one sentence?

Pretend for a minute.

My understanding: After the m1\ mathbf{M{_1}}M1 transformation, the space is scaled det(m1\ mathbf{M{_1}}M1) times, followed by the M2\mathbf{M{_2}} M2 transformation, (assuming that the space is thought of as unit space), Mathbf {M{_1}}M1 = 0, mathbf{M{_1}}M1 = 0, mathbf{M{_1}}M1 = 0, mathbf{M{_1}}M1 = 0, mathbf{M{_1}}M1 = 0, mathbf{M{_1}}M1 = 0 That det(m2m1mathbf {M{_2}} \mathbf{M{_1}}M2M1)=det(m2mathbf {M{_2}}M2)det(m1mathbf {M{_1}}M1) seems obvious and does not require any proof.

There are many other properties of matrices that also have their geometric significance, such as inverse matrices, eigenvalues, etc., which will not be explained here.

The transform matrix of

If you are familiar with the use of matrix in transform, I believe that most people do not understand the meaning of each parameter, which makes it difficult to memorize. Of course, it doesn’t affect our daily development because we rarely use it. However, if you understand the transformation of the above matrix, you will find that there is no need to remember. Each parameter is easy to understand, and some commonly used attributes, such as rotate and Translate, are actually matrix transformation and encapsulation of matrix.

To verify the demo, click on the element being animated, and the console will see that its transfrom is matrix.

The basic format

transform: matrix(a,b,c,d,e,f)
Copy the code

The corresponding matrix is A = [acebdf001]\begin{bmatrix}a&c&e\\ B&d&f \\ 0&0&1\\ end{bmatrix}⎣⎢, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable. After transformation as [acebdf001] [xy1] \ begin {bmatrix} a &c & e \ \ b&d & & f \ \ 0 0 & 1 {bmatrix} \ \ \ \ end begin {bmatrix} \ \ \ \ y x 1 \ \ \ end {bmatrix} ⎣ ⎢ ⎡ ab0cd0ef1 ⎦ ⎥ ⎤ ⎣ ⎢ ⎡ xy1 ⎦ ⎥ ⎤ = [ax + cy + ebx + dy + f1] \ begin {bmatrix} ax + cy + e + f \ \ \ \ bx + dy 1 \ \ \ end {bmatrix} ⎣ ⎢ ⎡ ax + cy + ebx + dy + f1 ⎦ ⎥ ⎤.

To recap, here A is the transformation of the plane (coordinate system), where (A,b) is the transformed basis vector I ⃗\vec II and (c,d) is the transformed basis vector j⃗\vec jj. [acbd]\begin{bmatrix}a&c\\b&d\\ end{bmatrix}[abcd] [acbd]\begin{bmatrix}a&c\ b&d\ end{bmatrix}[abcd] [acbd]\begin{bmatrix}a&c\ b&d\ end{bmatrix}[abcd] So let’s start with Translate.

A demo of the following scenarios

translate

Translate attribute represents the displacement of the element, i.e. does not involve the transformation of the coordinate system. Therefore, it is not possible to change the parameters a, B, C, and D. We need to add a pure displacement dimension, i.e. the translation (e,f) of (x,y) changes the coordinate to (x+ E,y+f). And at the same time we want to keep the function of [ACbd]\begin{bmatrix}a&c\ b&d\ end{bmatrix}[abCD] unchanged (assuming we already know what it does, more on that later).

So leaving I ⃗\vec II and J ⃗\vec jj unchanged, We can get e01f001 [10] [xy1] \ begin {bmatrix} 1 & 0 & e \ \ \ \ & 0 0 0 & 1 & f & 1 {bmatrix} \ \ \ \ end begin {bmatrix} \ \ \ \ y x 1 \ \ \ end {bmatrix} ⎣ ⎢ ⎡ 100010 ef1 ⎦ ⎥ ⎤ ⎣ ⎢ ⎡ xy1 ⎦ ⎥ ⎤ = [x] + ey + f1 \ begin {bmatrix} \ \ y + x + e f \ \ 1 \ \ \ end {bmatrix} ⎣ ⎢ ⎡ x + ey + f1 ⎦ ⎥ ⎤, So I get the transformation point x plus e,y plus f. And transformation of the plane, we can get a more general transformation matrix [acebdf001] \ begin {bmatrix} a &c & e \ \ b&d & & f \ \ 0 0 & 1 \ \ \ end {bmatrix} ⎣ ⎢ ⎡ ab0cd0ef1 ⎦ ⎥ ⎤.

Translate only uses the parameters e and f. Translate (e,f) corresponds to matrix(1,0,0,1, e,f).

scale

The scale property represents the scaling of the element, that is, the coordinate system is scaled, but not deformed; That is, the scalar multiplication of the matrix is performed only, I ⃗\vec II becomes mi⃗m\vec imi and j⃗\vec jj becomes Nj ⃗n\vec JNJ, where m and n are scalars.

[1001]\begin{bmatrix}1&0\\0&1\\ end{bmatrix}[1001] transform to [m00n]\begin{bmatrix}m&0\ 0&n\\ end{bmatrix}[m00n], [a00d]\begin{bmatrix}a&0\\0&d\\ end{bmatrix}[a00d].

Scale only needs parameters a and d, scale(a, b) corresponds to matrix(a, 0,0, d, 0,0).

rotate

The rotate property represents the rotation of an element, and that’s where trigonometry comes in. After rotation theta \ theta theta, I ⃗ \ vec ii into (cos ⁡ theta, sin ⁡ theta) (\ cos \ theta, \ sin \ theta) (cosine theta, sine theta), j ⃗ \ vec jj into (- sin ⁡ theta, cos ⁡ theta) (- \ sin \ theta, \cos\theta)(−sinθ, cosθ).

Corresponds to the matrix, theta, theta
[ 1 0 0 1 ] \begin{bmatrix}1&0\\0&1\\\end{bmatrix}
Transformation for
[ cos Theta. sin Theta. sin Theta. cos Theta. ] \begin{bmatrix}\cos\theta&-\sin\theta \\\sin\theta &\cos\theta \\\end{bmatrix}
. Rotate (a, b, c, and D)
Theta. \theta
) corresponding to thematrix(
cos Theta. \cos\theta
.
sin Theta. \sin\theta
.
sin Theta. -\sin\theta
.
cos Theta. \cos\theta
, 0,0).

Use a combination of

The other properties of Transform won’t be explained, but let’s see how they can be combined.

Let’s start with a question: What if we wanted to shrink the element by a factor of 0.5 and move it 50px right?

.element{ 
    transform: translate(50px.0) scale(0.5); 
} 
Copy the code
.element{ 
    transform: scale(0.5) translate(50px.0); 
} 
Copy the code

Is there any difference between the above two ways?

We said that every left multiplication of a matrix is a transformation, and every left multiplication of a matrix is a transformation. Suppose the matrix of Translate is T\mathbf{T}T, the matrix of Scale is S\mathbf{S}S, and the point matrix on the element is E\mathbf{E}E.

  • Transform: Translate (50px, 0) scale(0.5); transform: translate(50px, 0) scale(0.5); To Translate and Scale the element.
  • TSE\mathbf{TSE}TSE: S\mathbf{S}S, T\mathbf{T}T, transform: scale(0.5) translate(50px, 0) Scale the element before Translate.

ST\mathbf{ST}ST is not equal to TS\mathbf{TS}TS. Transform: translate(50px, 0) scale(0.5); And Transform: scale(0.5) translate(50px, 0); It’s different. So let’s see if that’s actually the case, right?

The demo shows that the two are different:

  • 50*0.5=25px; 50*0.5=25px; 50*0.5=25px;
  • Translate is used first, which has no effect on the plane and therefore has no effect on the subsequent scale

Therefore, as long as we keep in mind that the transform transforms the entire plane of the current element, not just the current element, we can use the correct combination.

Alternatively, knowing that combinatorial use is really just matrix multiplication, we can also use the same attributes consecutively (without necessarily using calc), such as:

  • transform: translate(100%, 0) translate(50px, 0); , first 100 percent right, then 50px right
  • transform: scale(2) scale(3); Zoom in 2 times first, then 3 times based on this, so that 2*3=6 times, instead of 2+3=5 times.

Thinking: non square matrix

All m by n matrices mentioned above are square matrices, i.e. matrices with equal number of rows m and columns N. What does a non-square matrix mean? Such as:

  • M < n, [acebdf]\begin{bmatrix}a&c&e\\b&d&f\\ end{bmatrix}[abcdef] 3*3 stands for what?
  • M > n, \ [adbecf] begin {bmatrix} a&d \ \ b &e \ \ c&f \ \ \ end {bmatrix} ⎣ ⎢ ⎡ abcdef ⎦ ⎥ ⎤ 2 * 2 represent?

The answer is not provided here, if you understand the above content, I believe it is easy to figure out ~

This paper only mentioned some basic properties of the matrix, but in fact these basic properties are enough to explain its geometric meaning, if you can think of the matrix to think about its geometric meaning, then the purpose of sharing will be achieved!

Ps: After watching the video, I went online to look up some articles on this topic. Since this is a subject that is hard to explain in words and easy to discourage, most articles are hard to follow, and this one may be the same. So I’m more than happy to see this video collection, which may or may not be usable in the future, but it also brings with it the fun times of watching the videos, and the “surge of ideas” and enthusiasm at the time of writing 🐶!

❤️ Thank you

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things.

Welcome to pay attention to the public number ELab team receiving factory good article ~

We are from the front end department of Bytedance, responsible for the front end development of all bytedance education products.

We focus on product quality improvement, development efficiency, creativity and cutting-edge technology and other aspects of precipitation and dissemination of professional knowledge and cases, to contribute experience value to the industry. Including but not limited to performance monitoring, component library, multi-terminal technology, Serverless, visual construction, audio and video, artificial intelligence, product design and marketing, etc.

Interested students are welcome to post in the comments section or use the internal tweet code to the author’s section at 🤪

Bytedance correction/social recruitment internal promotion code: W6WGRQM

Post links: jobs.toutiao.com/s/dPNW5wp