css3 transform rotate from 360deg to 0deg

Question

I'm making some simple css3 watch and its working like this (just calculates mins, secs and hours rotation and apply it

  var updateWatch = function() {
      var seconds = new Date().getSeconds();
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();

      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)"; 

      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $(".jquery-clock-sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
      $(".jquery-clock-hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
      $(".jquery-clock-min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});            
  }

All animations has some easing.

And all works well but when some marker makes full rotate then 360deg becomes 0deg and then marker makes all circle back. Is there any simple way to avoid it?

Answer 1

It is logical that the marker goes backwards when you change it from 359 deg to 0 deg.

The logical answer would be to avoid truncating the data.

I would get the time (fractionary part), convert it to seconds, convert that to degrees, and use that.

Don't worry if the resulting number is a zillion degrees, it will map to the correct position.

And it will wrap ok when going from a zillion degrees to a zillion + 1, when that happens to make a new rotation.

Just to avoid accuracy problems, as I said before, use only the time excluding the day.