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

Gotcha

transform-origin:0 0

Gotcha

transform-origin:
100% 100%

Gotcha

transform-origin:
126px 52px

Gotcha

CSS transforms

Original div

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

—Morpheus

Morpheus

CSS transforms

(a) transform: scaleX(2)

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

—Morpheus

Morpheus

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

—Morpheus

Morpheus

CSS transforms

(b) transform: skewY(10deg)

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

—Morpheus

Morpheus

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

—Morpheus

Morpheus

CSS transforms

(c) transform: skewX(15deg)

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

—Morpheus

Morpheus

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

—Morpheus

Morpheus

CSS transforms

(d) transform: scaleY(1.4)

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

—Morpheus

Morpheus

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

—Morpheus

Morpheus

CSS transforms

(e) transform: translateX(150px)

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

—Morpheus

Morpheus

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

—Morpheus

Morpheus

CSS transforms

(f) transform: translateY(50px)

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

—Morpheus

Morpheus

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

—Morpheus

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

Morpheus

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

—Morpheus

Morpheus

We can simplify this using CSS matrix

First, some quick revision...

Matrix Multiplication

Matrices and Linear Transformations

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(15o) = 0.2680

matrix[1] = scaleX*scaleY*tan(10o) = 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

Morpheus

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

—Morpheus

Morpheus

CSS Matrix elements

matrix(
2.0945,
scaleX
0.4937,
skewY
0.2680,
skewX
1.4,
scaleY
150,
transX
50
transY
)

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

More accurately:

2.0945,
scaleX + fudge / rotation factor
0.4937,
skewY / rotation factor
0.2680,
skewX / rotation factor
1.4,
scaleY + fudge / rotation factor
150,
transX
50
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)

How?

The CSS3 Matrix Construction Set (UserAgentMan)

More fun tools

CSS Generator - Transform
(AngryTools) - has errors

CSS Generator - Transform
(ds-overdesign)

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

www.intmath.com