Transformation matrix explained
Andrei Cacio
JavaScript Developer @ Moqups
JsHeroes Meetup Co-Organizer
Disclaimer!
I am not a math wizz!
You may have used before
- transfrom: translateX()
- transfrom: translateY()
- transform: rotate(45deg)
- transform: skew()
- transform: scale()
- etc.
You may have seen or used (or copy pasted)
{ transfrom: matrix(a, b, c, d, e, f); }
What the actual.... f***
Why should I even bother...
Matrix transformations are what RGB hex codes are to colors
- do more complex stuff
- storing
- more low level control
- having some fun with math :)
Basic algebric concepts
Vector
Matrix
Space
y
x
Basic algebric concepts
Vector Matrix multiplication
Such Math
Much Wow
What is a transformation?
Think of it as a map() method which applies a given matrix to each vector
So... what is the matrix?
The matrix represents the future position of our vectors that define our space
Let that sink in for a moment
Questions?
{ transform: matrix(a, b, c, d, dx, dy) }
Knowing this we can control the matrix
