Rotating a div element

Question

Is it possible to rotate a div element using Javascript & NOT using HTML 5?

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

Answer 1

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.

Answer 2

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).

Answer 3

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

Answer 4

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

http://kaisarcode.com/javascript-rotate

Answer 5

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)";