Frontend Engineering, Volume II

CSS: Chapter 9 Companion—Transformations

© 2013, Martin Rinehart


3D monchrome cube, last Example in chapter.

History

Ancient geodesy (aka geodetics): https://en.wikipedia.org/wiki/History_of_geodesy.

History of linear algebra: https://en.wikipedia.org/wiki/Linear_algebra#History.

Textbook preface, 1994: http://www.cs.ioc.ee/yik/lib/20/Foley1.html.

Transforms in computer science, 2000: http://www.cs.princeton.edu/courses/archive/fall00/cs426/lectures/transform/sld002.htm.

W3C Rotations morph into Transformations: http://lists.w3.org/Archives/Public/www-style/2007Oct/0209.

First W3C Working Draft, 2D Transforms: http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/.

The current W3C Working Draft: http://www.w3.org/TR/css3-transforms/.

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: http://mathworld.wolfram.com/AffineTransformation.html.

Basics, with some math: http://www.willamette.edu/~gorr/classes/GeneralGraphics/Transforms/transforms2d.htm.

Underlying 2D transform math: http://www.cs.uic.edu/~jbell/CourseNotes/ComputerGraphics/2DTransforms.html.

From math into OpenGL: http://www.cse.ohio-state.edu/~parent/classes/581/Lectures/5.2DtransformsAhandout.pdf.

3D Affine Transformations

Practical with some theory, from the Opera browser team: http://dev.opera.com/articles/view/understanding-3d-transforms/.

Summary table including browser support and prefixes: http://www.w3schools.com/css/css3_3dtransforms.asp.

Overview with lots of "how-to" code examples: http://desandro.github.io/3dtransforms/.

Martin's introduction to the transformation matrix (and matrix multiplication): http://desandro.github.io/3dtransforms/.

Martin explains matrix multiplication (with colored blocks): http://martinrinehart.com/models/tutorial/tutorial_mm.html.

The tutorial where Martin learned his matrix multiplication: http://www.zweigmedia.com/RealWorld/tutorialsf1/frames3_2.html.

Building a Sign

Please tell us about your blog posts or other articles on this subject. Otherwise, Example 9h, here: http://martinrinehart.com/frontend-engineering/knowits/v2/online/09/v2-chapter-09h.html.

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: http://css-tricks.com/creating-a-3d-cube-image-gallery/.

Build (and spin) a cube: http://davidwalsh.name/css-cube.

From the archives, Paul Hayes in 2009: http://www.paulrhayes.com/2009-04/3d-cube-using-css-transformations/.

Feedback: MartinRinehart at gmail dot com

# # #