On the Floor

Transforms are a feature of CSS3 that let you apply matrix-based transformations to html elements.  There are two properties that you can use to apply the transformations: transform, which specifies the actual transformation(s); and transform-origin, which specifies where in the element the transformation acts on.

There are four basic transformations you can apply to an element.  A translation just moves the element around, and I am not sure if practically there is any difference between this and top and left.  I think you just get translations for free when you implement matrix transforms.  Scaling means stretching or shrinking the element.  It's kind of cool, because when you do it, the internal elements scale too, which means text gets bigger and so forth.  Skewing an element means that you push it sideways and turn it into a parallelogram instead of a rectangle.  And a rotation means spinning it.

And this is where the transform-origin property comes in.  Using rotation as an example, the default is to rotate the element about its centre.  If you want to rotate it about one of its corners, or any other point, you can change that by modifying transform-origin.

There are several ways of applying the transformations.  If you are mathematically inclined, you can use the matrix() function and pass in your raw transformation.  Luckily, there are helper functions that let you just specify a simple rotation, for example, with rotate(33deg).

If you are using multiple transformations, and you are not using the matrix method to indicate them, you must define them on one line, like this:

transform: rotate(45deg) scale(2);

Trying to define them on multiple lines won't work; writing:

transform: rotate(45deg);
transform: scale(2);

will only apply the last transformation, as it's analogous to writing something like:

border: 1px;
border: solid;
border: black;

These transformations allow you to add a lot of interesting effects, and give you the option of some interesting layouts.  Practically speaking, however, they seem to me to be most relevant in the context of fixed layout web sites.  For example, in my bauhaus poster example above, I still have live, searchable type, which is a bonus, but the whole concept of page flow has been bent, broken, trampled, put through a shredder and lit on fire.  Trying to dump dynamic content into this (without resorting to overflow:scroll;) would not be good.

Having said that, now that the designers in our office have seen this, I'm sure I'll be asked to make it work >:(

PS: It should go without saying that these demos only work on Mozilla- and Webkit- based browsers, mostly because I couldn't be bothered trying to figure out the math to make it work with IE's weird filter thingy.