Calculating 2d Matrices

JavaScript doesn’t have anything built-in to handle matrix calculations, however, there is a great library called Sylvester that makes matrices easy.

Standard 2d transformation functions

The CSS3 spec for 2d transformations lists out the common functions. But they didn’t just make them up out of thin air. Each function represents a specific matrix that is used to calculate coordinates on a new object. Furthermore, combining functions is the same as multiplying matrices together. The SVG spec has a great breakdown of how matrices work.

transform: rotate(45deg) skewX(20deg); /* this is equivalent a rotate matrix multiplied by a skew matrix */