Rotate Elements with CSS Transformations
I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations allow us to rotate elements on a 360 degree axis. Rotating elements is a breeze too -- take a look.
The Mozilla CSS
-moz-transform:rotate(120deg);
The CSS property is denoted as Mozilla-only with the "-moz" prefix. You can rotate your element any number of degrees. You may also use the "moz-transform-origin" property to set an origin for the transformation:
-moz-transform:rotate(120deg); -moz-transform:skewx(25deg) translatex(150px);
The WebKit CSS
-webkit-transform:rotate(120deg);
Obviously WebKit uses the "-webkit" prefix. The transformation syntax, however, is the same. WebKit originated CSS transformations; Mozilla implemented the WebKit standard.
That's about it. CSS transformations are not new but it's good to review them every once in a while. To this day I've not used CSS transformations on a project in production. Maybe you have a good example of modern CSS transformation usage you can share?
* Note: I did notice that WebKit has problems supporting rotated iFrame's. Mozilla did just fine.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
I’d just like to point out that Opera supports -o-transform. It’s nice to have properties like this in CSS, even if it means retyping them three times just to get it to work cross-browser!
I generally use them as a hover event, normally with transitions as well. You can also use them to make carousel type effects – take a look at css3.bradshawenterprises.com/demos for two examples.
The downside to using them for anything big is that in browsers with no support the effects don’t degrade nicely unless they are small (scale(1.05) on hover for instance).
For an example not by me, panic’s blog makes pretty heavy use of them tok rotate each blog post slightly.
I tried to make some real nice post-it’s using CSS only. Gradients and shadow were great but the rotation has a real pain in the ass. Why ? Because all texts inside the rotated element are near to unreadable. I guess browsers still have to work on this one: rotating texts :/
yeah, the text rotation stuff is really bad, does make it pretty unreadable at the moment. Even in the Webkit Nightlies it’s not ideal.
I’m doodling a JavaScript/mootools game of cards. thank you for this post – now I can fan the cards :D
Not working with IE7
we have to use this …
progid:DXImageTransform.Microsoft.BasicImage(rotation=0)
// rotation
0 = 0º
1 = 90º
2 = 180º
3 = 270º
IE sucks!
@duarte: Actually, check out http://css3please.com/ for a nicer IE-only alternative using a transformation matrix (look for the box_rotate section)
http://moo4q.com !
I use ‘em there.
As for IE DXImageTransform — it’s appearance is, shall we say, flippin’ ugly.
does this mean you might be able to change pages by spinning the current page of the screen revealing the new page underneath (using ajax a of course)