# CSS Matrix - a mathematical explanation

This article gives an overview of CSS transforms, and explains how they can be replaced using a single transform with CSS matrix. It shows where the numbers come from in CSS matrix, the result of matrix multiplication.

## Important gotcha - `transform-origin`

Before talking about transforms and matrices, we'll briefly describe the important concept of `transform-origin`

– this is something that can easily bite you in the tail. It's quite possible to have an object disappear right off the screen when performing a simple transform, and often the culprit is the **origin** of the transform has not been set, or has been set differently to what you expect.

For each of these examples, we're going to rotate the image (clockwise) by 20^{o}. However, they all have different `transform-origin`

s.

**Click** on each picture to see how the transform is different for different `transform-origin`

s.

`transform:rotate(20deg)`

The browser default is `transform-origin:50% 50%`

, and it means the image will rotate around its center, while "`transform-origin:0 0`

" means it will rotate around the top left of the picture.

Default

`transform-origin:0 0`

"100% 100%" means the image will rotate around its bottom right corner, while I set "126px 52px" so it rotates around a key focus of the image.

`transform-origin:100% 100%`

`transform-origin:126px 52px`

For the rest of the examples on this page, the `transform-origin`

is set to `0 0`

(top left).

## What are the easiest ways to calculate `CSS matrix`

?

### Example: title slide

This was the title slide (reproduced from above) I used in a talk on this topic recently. The title text is made to look like it is actually on the billboard. To make it look realistic, I needed to apply a 3D transform.

## Useful CSS matrix tools

Of course, we don't need to calculate such matrices as the browser does it for us "under the hood". However, there are times where we want to apply a matrix but don't know the exact scale, skew and so on.

Here are some tools that help in the process.

(1) The CSS3 Matrix Construction Set (by UserAgentMan)

(2) CSS Generator - Transform (AngryTools)

This one is interesting but it makes no mention of the tangent ratio involved in the skew transformation, so it wasn't clear whether the slider was in degrees, radians or what. (It's not the angle, it's the result of taking the tan of an angle.)

(3) CSS Generator - Transform (ds-overdesign)

CSS matrix interactive applet (IntMath)

This is my own, and I hope it's useful.

## Matrices and SVG

Matrix-based transforms work similarly to HTML CSS matrix transforms, except:

`transform-origin`

: is at top-left of the element, not in the middle as in HTML, all except Firefox, that has it at middle (this has been an on and off "bug" since 2014).

SVG example using matrix transforms: Eigenvectors concepts

## Further Resources

Understanding the CSS Transforms Matrix (Opera - one of the best)

The CSS3 matrix() Transform for the Mathematically Challenged (User Agent Man - quite good mathematical explanation)

An Introduction to CSS 3-D Transforms (David DeSandro - good examples)

CSS matrix() Function (Quackit - some misleading information)