Rotating with CSS
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.
I am always bewildered at how many years it takes the almighty decision-makers to implement such simple things as rotation of images and text.
Or maybe it just takes time for everyone to agree. I can imagine the Microsoft people and the Mozilla people etc gathered around a big table arguing like: “rotation would be useful”, “No! Rotation is blasphemy! Give them rotation and next they’ll ask for drop-shadows!” “Drop shadows would be great too!” “To hell with your drop-shadows” “Well we’re going to support it!” “Go right ahead, see what I care!”…
From a designer’s standpoint it’s frustrating when you’re used to being able to do just about anything in a program like Photoshop and then you try to translate your design to the web and all hell breaks loose. It’s one reason I abandoned interest in web design for many years.
In the end you often have to choose between making something interesting and making something safe. I say all developers/designers boycott all the non-Firefox browsers just so we can all get on the same bloody page! (Excuse the pun)
QA
27 Feb 09 at 3:13 am
[...] Source [...]
Rotating with CSS - Si Jobling | CSS Tutorials - CSSHelper.net
19 Mar 09 at 10:24 am
When I design a sight I design first and code second. I find that using pure CSS layout , like an obnoxious backseat driver, often ends up stearing the design a little bit in the end. This is most often a problem when floating elements inside a centered div - the darn footer elements colapse upwards; don’t float use positining and margins? Crossbrowser catastrophe! Usually one simple table takes care of so many things.
Suzann Olejarz
28 May 10 at 2:12 pm