# CSS Matrix

What is it? How does it work?

Murray Bourne, intmath.com

## Don't worry!

90% of mathematics is just...

... **addition and multiplication**

## What the?

Incomplete information: MDN's matrix page

Wrong information (more later)

## Important gotcha - `transform-origin`

`transform:rotate(20deg)`

Default (50% 50%)

transform-origin:0 0

transform-origin:

100% 100%

transform-origin:

126px 52px

## CSS transforms

Original div

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(a) `transform: scaleX(2)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(b) `transform: skewY(10deg)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(c) `transform: skewX(15deg)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(d) `transform: scaleY(1.4)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(e) `transform: translateX(150px)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS transforms

(f) `transform: translateY(50px)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## What if we want to apply all of them?

We need to present them in **REVERSE order** since the browser applies them in the order **right to left**:

`transform: translateY(50px) translateX(150px) scaleY(1.4) skewX(15deg) skewY(10deg) scaleX(2)`

## Combining CSS transforms

(g) `transform: translateY(50px) translateX(150px) scaleY(1.4) skewX(15deg) skewY(10deg) scaleX(2)`

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## We can simplify this using CSS matrix

First, some quick revision...

## Writing the transform using a matrix

(What your browser does under the hood...)

`transform:`

translateY(50px) translateX(150px) scaleY(1.4) skewX(15deg) skewY(10deg) scaleX(2)

## Writing the transform using a matrix

`translateY(50px) translateX(150px) scaleY(1.4) skewX(15deg) skewY(10deg) scaleX(2)`

... becomes...

`matrix(2.0945, 0.4937, 0.2680, 1.4, 150, 50)`

Where do those numbers come from?

matrix[2] = tan(15^{o}) = 0.2680

matrix[1] = scaleX*scaleY*tan(10^{o}) = 0.4937

matrix[0] = scaleX + ??? = 2.0945

And why?

## Explanation via matrix multiplication

`transform:`

translateY(50px) translateX(150px) scaleY(1.4) skewX(15deg) skewY(10deg) scaleX(2)

`transform:`

matrix(2.0945, 0.49372, 0.2680, 1.4, 150, 50)

## Explanation via matrix multiplication

## CSS transforms: Using matrix

(h) `transform:`

matrix(2.0945, 0.4937, 0.2680, 1.4, 150, 50)

"This is your last chance. After this, there is no turning back."

—Morpheus

"This is your last chance. After this, there is no turning back."

—Morpheus

## CSS Matrix elements

scaleX

skewY

skewX

scaleY

transX

transY

Writing it as a real matrix (if you're doing one thing at a time):

## More accurately:

scaleX + fudge / rotation factor

skewY / rotation factor

skewX / rotation factor

scaleY + fudge / rotation factor

transX

transY

# Easier way to calculate `CSS matrix`

?

## Example: title slide

Needed to use `matrix3d`

, since no side is parallel

# CSS Matrix

What is it? How does it work?

Murray Bourne, intmath.com

# CSS Matrix

What is it? How does it work?

Murray Bourne, intmath.com

matrix3d( 1.8724, 0.6193, 0, 0.0009, -0.2480, 1.3901, 0, -0.0005, 0, 0, 1, 0, 150, 50, 0, 1)

## More fun tools

CSS Generator - Transform

(AngryTools) - has errors

CSS Generator - Transform

(ds-overdesign)

CSS matrix interactive applet

(IntMath)

## Matrices and SVG

Work similarly to HTML CSS, except:

`transform-origin`

: is at top-left of the element, not middle as in HTML

Except Firefox, that has it at `50% 50%`

(on and off "bug" since 2014)

SVG example: Eigenvectors concepts

## 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)

## The end...^_^

@intmath