The Designer’s Guide to CSS3: Transformations

The Designer’s Guide to CSS3

CSS-based transformations allow you to scale, rotate, shift and skew HTML elements, including containers, images and just about any HTML element you use. Some of the things that used to require JavaScript to set up can be done with CSS3 much more easily.

One way to put transformations to work is reuse visual assets. For example, you can produce a site’s logo in one size and then use CSS to scale it for various uses throughout the site. Another great idea is to use transformations to bring a static grid of photos to life (as seen in the screenshot below).

Putting an image at an odd angle typically required some crafty JavaScript or images that simply faked the effect. With new CSS3 techniques, any element can be shifted and rotated to achieve the desired effect.

Keep in mind that many browsers aren’t yet able to render these transformations properly. So your design should be set up to function properly even if the elements are not transformed. For example, the same photo collage shown above works just fine in older browsers, it just doesn’t look as snazzy (below is the site above in an older version of Internet Explorer).

One radical example of CSS transformations is this experimental tool that applies text to a curve. It’s not something you’d use every day, but it demonstrates the types of things that will be possible in the near future. Below is some text I styled using this tool.

CSS3 transform resources

Combing transformations with transitions

Transitions aren’t yet ready for prime time, but they’re relevant to the transformation topic. Transitions allow you to ease between two styles. For example, if you want a button to change colors when you mouse over it, you can use a transition to have it fade between the two colors. You can add transitions to create interactive transformations: Simple things like revealing a panel of links upon mousing over could be beautified by adding transitions.

CSS3 transition resources

3D Transformations

The specifications for 3D transformations are already in place, but few browsers support them yet. Regardless, it’s a great demonstration of what the future holds for CSS. In particular you should check out this demonstration of 3D transformations.

It’s mind-boggling what CSS3 makes possible. Certainly there’s nothing wrong with working with time-proven techniques. But as we move forward, you’ll find more and more design tricks are done in the browser.

Next up: Conclusion and 8 examples to inspire

CSS3 Resources from