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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/6797111/pasted-from-clipboard.png)
Space
y
x
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/6797126/pasted-from-clipboard.png)
Basic algebric concepts
Vector Matrix multiplication
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/6797229/pasted-from-clipboard.png)
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?
![](https://media2.giphy.com/media/TmT51OyQLFD7a/giphy.gif)
{ transform: matrix(a, b, c, d, dx, dy) }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/6797152/pasted-from-clipboard.png)
Knowing this we can control the matrix
![](https://media0.giphy.com/media/MBlUQYA2kcz6ek74FD/giphy.gif)
Questions?
na... just kidding
deck
By Andrei Cacio
deck
- 1,306