# 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

# deck

- 1,091