Two years ago, I suggested how a rotation property would be a welcome introduction to CSS, allowing designers and developers to control their designs even further with an often used design pattern.

It seems I wasn’t alone in thinking of this and we are now getting very close to a fully supported solution.

Last year, the forward thinking WebKit guys implemented a new -webkit-transform property to their rendering engine. Among many things, this new property allowed for any element in a web document to be rotated using some very simply syntax:

#my_element {
  -webkit-transform: rotate(90deg);
}

This was all well and good but with support limited to WebKit browsers (like Safari and Omniweb), it had very limited appeal - it was more of a test bed for the future.

Only last month though, the Mozilla team released a nightly build which also supported the new transform property, also prepending their specialist prefix to it as -moz-transform which took the same values as -webkit-transform.

Mozilla also included a secondary property called -moz-transform-origin which allows you to control the point of origin (default is around the centre point).

By using the following code, you will have two of the most popular rendering engines covered when it comes to rotating:

#my_element {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

That’s Safari and Firefox now covered!

It’s obviously still too early to rely on these CSS properties for mass coverage but if you think along the lines of progressive enhancement - offering a richer experience to users of modern browsers while delivering basic functionality to those less fortunate - it is certainly something you can start playing with.

Twitter have done it with the rounded corners on their recent redesign and I’ve started sprucing up my redesign with several CSS 2.1 properties (check out the slightly rotated headings in the sidebar).

Generally speaking, this is a great move forward with the CSS specification. It’s unlikely to become a firm standard for many years yet but at least you can start sprucing up your designs by experimenting with the CSS Transform properties.