Rotating a div element

Is it possible to rotate a div eleme开发者_运维百科nt using Javascript & NOT using HTML 5?

If so what attributes of the element do I set/change to make it rotate? Ie, div.what?

PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

---

Old question, but the answer might help someone...

You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).

Example of how to rotate a element 45 degrees using CSS:

.example {
    -webkit-transform: rotate(45deg); /* Chrome & Safari */
    -moz-transform: rotate(45deg); /* Firefox */
    -ms-transform: rotate(45deg); /* IE 9+ */
    -o-transform: rotate(45deg); /* Opera */
    transform: rotate(45deg); /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}

Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.

I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

---

Yes, it is possible to rotate a div not using HTML5, but using CSS3.

You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).

For more info, Google for: css rotate

If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

---

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

---

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.

http://kaisarcode.com/javascript-rotate

---

If you are looking for a way to do it instantaneously, than you can use element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.

If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s"; element.style.transform = "rotateZ(90deg)";