JS CSS Clock not working in IE

Question

I have racked my brains on this for ages and looked through stackoverflow with no joy but I feel like there is an answer to this so...

I have a working analogue clock in Chrome and Firefox but it doesnt work in IE. It uses js to get the time from the local computer then rotates the hand accordingly using the css transform:rotate. below is the script:

<script type="text/javascript">

    $(document).ready(function() {

          setInterval( function() {
          var seconds = new Date().getSeconds();
          var sdegree = seconds * 6;
          var srotate = "rotate(" + sdegree + "deg)";

          $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform":srotate});

          }, 1000 );


          setInterval( function() {
          var hours = new Date().getHours();
          var mins = new Date().getMinutes();
          var hdegree = hours * 30 + (mins / 2);
          var hrotate = "rotate(" + hdegree + "deg)";

          $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "-ms-transform":hrotate});

          }, 1000 );


          setInterval( function() {
          var mins = new Date().getMinutes();
          var mdegree = mins * 6;
          var mrotate = "rotate(" + mdegree + "deg)";

          $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "-ms-transform":mrotate});

          }, 1000 );

    }); 

</script>

Which IE are you using ? [CanIUse transform](http://caniuse.com/transforms2d) — Vucko, Nov 28 '13 at 13:06
I managed to get it working on IE when I changed the browser mode (F12) from compatibility mode to just IE 10. I guess because it doesnt work in IE 8 and below which is fine. Does this mean everybody using IE 10 will have it set to compatibility mode though and thus the clock wont work?? — Lee Dennis, Dec 09 '13 at 12:02

score 1 · Answer 1 · edited May 23 '17 at 12:05

As far as I'm aware the proper use for transform in IE (v9 and above) is:

transform: rotate(45deg);

If you are using IE 8 or below you will need to use the progid:DXImageTransform.Microsoft.Matrix() method (which can be buggy as you have to use SIN and COS mathematical values). This way works with the css attributes of filter and -ms-filter.

Take a look at this post which explains it in more depth, but you will need to transform the DXImageTransform values to be dynamic of course.

CSS rotate property in IE

JS CSS Clock not working in IE

1 Answers1