Question

im building an analog clock using JavaScript, i know it will be alot easier if i do it with jQuery but it’s not an option here.

Everything’s working in Chrome and Safari(meaning the webkit browsers) but not in any of the others.

Here is my tick method, basically it rotates the image according to the time.

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: (" + deg + "deg);"
      + "-o-transform: (" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);"
    ); 
}

any suggestion to make it work?

Answer 1

You have not used rotate for the -moz- and -o- properties, the rotation in the IE syntax

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: rotate(" + deg + "deg);"
      + "-o-transform: rotate(" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "-ms-transform:rotate("+ deg +"deg);"
    ); 
}

Demo at http://jsfiddle.net/gaby/fjHHX/3/

---

Update

Altered the code to support the IE9 -ms- extension and removed the filter one which does not allow for arbitrary rotations (only 0, 90, 180, 270 degrees)..

For support of IE versions 8 and below you can use a matrix transformation but it gets ugly.. look at section .box_rotate at http://css3please.com/
or look at the source of http://www.boogdesign.com/examples/transforms/matrix-calculator.html for how to do it