2d Transformations

Text Text Text Text Text Text Text Text Text Text Text Text

Translate, rotate, skew - fun stuff. These effects are most useful when used with CSS3 animation, especially in user interactions e.g. hover states.

Text Text Text Text Text Text Text Text Text Text Text Text

It's tempting to use the transform:scale() property for RUI purposes. One thing to be aware of is that, though the element (and its children) scale, the original real estate in the DOM is preserved.

Shrink the window width to get the gist of what I mean.

A solution to this is to use negative margins:

Text Text Text Text Text Text Text Text Text Text Text Text

This preserves the top left X/Y coordinates equivalent to the original position.