18 September 2009

Fun with CSS-only object rotation

The other day, thanks to a forum post about the best web developers to follow on Twitter, I started following the Twitter account for cssbeauty.com (you can follow them too at twitter.com/cssbeauty). One of the tweets that immediately jumped out at me was an article they'd linked to about rotating text using only CSS. I had to have a read of that. So impressed was I that this afternoon I've had a play and had a great amount of fun doing things that I never thought possible with CSS. It just goes to show - there is always more to learn.

The key bit of CSS magic comes in the form of -moz-transform: rotate(90deg); (the -moz- prefix is because it's technically part of CSS3, which isn't officially out yet, and you can achieve the same thing in Safari by using the -webkit- prefix instead). As you'd expect, that clever bit of CSS rotates the object 90 degrees clockwise. The only caveat is that the object concerned has to be a block element rather than inline, so you can only rotate complete box elements, not individual letters. The original article showed how to do some simple rotation with IE as well, although that's a bit more hacky and only rotates in multiples of 90 degrees. Since this is an experiment rather than part of an actual web site design, I'm happy to ignore IE for the moment and focus on what the 'real' browsers can do.

It's simple but effective. Giving your H1 tag a slight rotation, say of 5 degrees, gives it an attractive bit of tilt. Of course you can go further than that and have absolutely everything at an angle, which is what I've done in the demonstration file below. Some boxes are tilted only slightly so that they're still readable, while the side menu is tilted a full -90 degrees and positioned on the left hand side of the page. Sure, you could achieve this sort of thing with images, but where's the fun in that? This is also machine readable and screen-reader-friendly, and degrades fairly nicely in browsers that aren't on the bleeding edge just yet.

There are some browser differences that I've noticed. I've been doing this on a Mac, seeing the page in Firefox 3.5 and Safari 4. Opera doesn't know what to do with it, and half the menu is missing, but at least the main body of text is still readable. I also notice that the text is clearer on Safari, while Firefox's text rendering at arbitrary angles is a little uneven. On the other hand, the dotted borders I've used render perfectly in Firefox but very jaggedly in Safari. There was also a fair amount of tweaking needed to get the 90 degree rotated elements to line up (i.e. the menu and the images). I'm not sure where the centre of rotation is, and absolute positioning seems to be thrown out by a certain factor after rotation. Still, very cool nonetheless.

If you're not convinced by the screenshot, take a look at the demonstration file yourself (in a compatible browser). Feel free to look at the source code too to see how I've done it. Not the most elegant code I've ever created, but it serves the purpose of demonstration! Here's hoping IE6 officially dies so we can all move on and start actually using these cool features...

About Matthew Dawkins

Matthew is a web designer based in Somerset, UK. He has a passion for CSS and design, and runs his own web design business.