css3 rotate alternative

Question

I am using the CSS3 rule, "rotate" to rotate a div containing text. You can see the page here: http://vitaminjdesign.com/v2/socialmedia.html. I am looking for cross browser support for rotating the div; however, this CS3 rule won't work on IE. Is there a jquery option or another javascript solution that will yield the same result, with cross browser compatibility?

Answer 1

You might find some relevant information at this similar question:
http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery

Answer 2

I'd use Raphael and Cufon for this sort of thing, although you have to roll your own word-wrapping when you rotate because you'll have to use Raphael's print instead of Cufon's replace. That way the fonts are vectors and the rotations are handled in a purely geometric way.

Current problems with css-rotate go beyond cross-browser compatibility, though--in the browsers that do support it, the results often look like crap. Your site in my Firefox 3.6 looks like an aliased mishmash on uneven baselines. I know you asked a specific question, which I did my best to answer, but my advice to you is to ditch the overhead of js libraries for what you are trying to accomplish here, and just go with a high quality image. You've already invested bandwidth in the "hanging tags" backdrop image, so the cost of adding text to that image is minimal, while the cost of whole new js libraries to handle the issue of text rotation for you properly will be quite high. Not the most cutting-edge solution, I'll grant you... but that's where we are today.

Answer 3

Using Sandpaper, you can use this CSS rule:

-sand-transform: rotate(90deg);

And it'll work in every browser - even in IE.

Answer 4

-sand-transform: rotate(-7.5deg); is not giving the desired result in IE. It doesn't support negative values or why?