Frontend Engineering, Volume II

CSS: Chapter 9 Companion—Transformations

© 2013, Martin Rinehart

3D monchrome cube, last Example in chapter.


Ancient geodesy (aka geodetics):

History of linear algebra:

Textbook preface, 1994:

Transforms in computer science, 2000:

W3C Rotations morph into Transformations:

First W3C Working Draft, 2D Transforms:

The current W3C Working Draft:

2D Affine Transformations

"An affine transformation is any transformation that preserves collinearity (i.e., all points lying on a line initially still lie on a line after transformation)..."

Wolfram MathWorld, Affine Transformation

Affine transformations defined:

Basics, with some math:

Underlying 2D transform math:

From math into OpenGL:

3D Affine Transformations

Practical with some theory, from the Opera browser team:

Summary table including browser support and prefixes:

Overview with lots of "how-to" code examples:

Martin's introduction to the transformation matrix (and matrix multiplication):

Martin explains matrix multiplication (with colored blocks):

The tutorial where Martin learned his matrix multiplication:

Building a Sign

Please tell us about your blog posts or other articles on this subject. Otherwise, Example 9h, here:

Building a Cube

Per the text, we do not recommend any of the standard approaches to making a CSS3 cube. Complete the carousel (Chapter 10) to see why. Compare our method to these.

A guest post on Coyier's blog, mixing theory and code:

Build (and spin) a cube:

From the archives, Paul Hayes in 2009:

Feedback: MartinRinehart at gmail dot com

# # #