views:

17762

answers:

9

Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.

+2  A: 

I doubt you can rotate an element using DOM/CSS. Your best bet would be to render to a canvas and rotate that (not sure on the specifics).

strager
I think this is what the [ **Raphael library** ](http://raphaeljs.com/) does. Here's some [ **rotation with Raphael** ](http://raphaeljs.com/image-rotation.html)
Peter Ajtai
+3  A: 

yeah you're not going to have much luck i think. Typically across the 3 drawing methods the major browsers use (Canvas, SVG, VML), text support is poor, I believe. If you want to rotate an image, then it's all good, but if you've got mixed content with formatting and styles, probably not.

Check out RaphaelJS for a cross-browser drawing API.

nickf
+14  A: 

Firefox 3.5, Safari, and Chrome all have a CSS transform property now that will let you rotate a div. You might find this helpful:

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Zachstronaut
@Zach - Is there any way to rotate DIVs in IE? - Great website by the way ;)
Peter Ajtai
A: 

look here http://wilq32.googlepages.com/wilq32.rollimage222

pinnokio
A: 

Rotating Div is possible. Check it here: http://pixelcone.com/jquery/jquery-rotating-menu

John Lanz
A: 

how can i rotatation div?

sokkhim
This is not an answer. It is a question. Please delete it.
Peter Ajtai
A: 

How did Panic do it? http://www.panic.com/blog/

Javitzso
Panic used CSS transforms.http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Transforms/Transforms.html
tedmiston
I still don't get how they made it work on Chrome.
fcurella
@fcurella - Chrome uses webkit, so it has `WebkitTransform: rotate(Xdeg);`
Peter Ajtai
A: 

http://css3please.com has it in. No need for jQuery at all; it's brilliant!

Ben
Why was this down voted? It has the CSS for all the browsers - major bonus.
Krisc
A: 

To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).

This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases

If you want to animate the rotation, you can use a recursive setTimeout()

You could probably even do part of a spin with jQuery's .animate()

Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.

Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle example

Peter Ajtai