CSS3 变换从 360 度旋转到 0 度

css3 transform rotate from 360deg to 0deg

本文关键字：旋转 变换 CSS3      更新时间：2023-09-26

我正在制作一些简单的 css3 手表，它的工作原理是这样的(只是计算分钟、秒和小时的旋转并应用它

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

所有动画都有一些缓和。

一切正常，但是当某个标记完全旋转时，360度变为0度，然后标记使所有圆回来。有什么简单的方法可以避免它吗？

当您将标记从 359 度更改为 0 度时，标记向后移动是合乎逻辑的。

合乎逻辑的答案是避免截断数据。

我会得到时间(小数部分(，将其转换为秒，将其转换为度数，然后使用它。

如果结果数字是亿万度，请不要担心，它会映射到正确的位置。

当从亿万度到数亿度 + 1 时，它会包裹正常，当它碰巧进行新的旋转时。

只是为了避免准确性问题，正如我之前所说，只使用不包括一天的时间。

相关文章：