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

Questions?

na... just kidding

deck

By Andrei Cacio