Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotating a div element

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?

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

like image 742
Mach Avatar asked Mar 09 '11 22:03

Mach


1 Answers

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

like image 138
Iain Collins Avatar answered Oct 13 '22 15:10

Iain Collins