css3 变换从 360 度旋转到 0 度答案

【问题标题】：css3 transform rotate from 360deg to 0degcss3 变换从 360 度旋转到 0 度
【发布时间】：2013-10-08 13:31: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 度，然后标记使所有圆圈返回。有什么简单的方法可以避免吗？

【问题讨论】：

也许是<value> % 360？例如"rotate(" + mdegree % 360 + "deg)"
因为这些值永远不会大于 360，所以不会有任何改变。
你能设置一个重现问题的小提琴吗？
做一个诊断函数，在jQuery执行之前将sdegree、hdegree、mdegree、srotate、hrotate和mrotate的值打印到控制台？

标签： javascript css transform

【解决方案1】：

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

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

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

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

当它从 1 亿度变为 1 亿 + 1 时，它会包裹好，当这发生新的旋转时。

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

【讨论】：