如何正确地顺时针旋转图像（从原点转换）CSS/Javascript

我试着旋转一个图像，使其偏离原点（变换后的）成圆形，或者更确切地说，是顺时针旋转。我已经成功地设置了一个绝对中心的图像相对于我的模态。我完全可以控制时间和分钟。问题是，我需要日间时段指示器（在本例中，我只有夜间时间）同时跟随小时指示器（或“手”）。我只能手动将其正确设置：。但随着时间的推移，它会回到原来的位置，或者类似的东西，我并没有注意到每一步：。这是我的代码：
CSS:

#clock {
display: -webkit-box;
margin-left: auto;
margin-right: auto;
/*margin: 0 auto;*/
padding: 100px;
position: relative;
}
.minutes {
    position: absolute;
    /*top: -90px;
    left: -27px;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    width: 208.5px;
    height: 208.5px;
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.hours {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    height: 155.5px;
    position: absolute;
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.night {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    z-index: 3;
    height: 50px;
    transform-origin: 120px 0px;
    -webkit-transform-origin: 120px 0px;
    -webkit-transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}

Javascript:

    let rings = [], elements = [];
rings = [{
  ring: 'minutes',
  angle: 0
},
{
  ring: 'hours',
  angle: 0
},
{
    ring: 'night',
    angle: 0
}
  ];

  for (let index = 0; index < rings.length; index++) {
    elements[index] = document.querySelector('.' + rings[index].ring);
  }
setInterval(function () {
    let now = new Date();
    minutes = now.getMinutes();
    hours = now.getHours();

    for (var id = 0; id < rings.length; id++) {
      if (rings[id].ring === 'minutes') {
        rings[id].angle = minutes * 6;
      } else if (rings[id].ring === 'hours') {
        rings[id].angle = (hours * 30) + (minutes / 2);
      } else if (rings[id].ring === 'night') {
        rings[id].angle = (hours * 30) + (minutes / 2);
      } else {
        console.log('Err: ');
      }

      elements[id].style.webkitTransform = 'rotateZ(' + rings[id].angle + 'deg)';
      elements[id].style.transform = 'rotateZ(' + rings[id].angle + 'deg);';
    }
  }, 1000);

let-rings=[]，elements=[]；
环=[{
铃声：“分钟”，
角度：0
},
{
铃声：“小时”，
角度：0
},
{
铃声：“晚上”，
角度：0
}
];
对于（让索引=0；索引

HTML:

---

你要做的是在

小时内嵌套
日/夜
指示器。然后你可以精确地定位它

<div id="clock">
    <img src="http://i.imgur.com/4k04SRS.png" alt="" class="minutes">
    <div class="hours">
        <img src="http://i.imgur.com/9cQMi2m.png" alt="" class="night">
    </div>
</div>

无法准确理解发生了什么，你能把它放在小提琴上，这样我们就可以找出问题所在吗？你能提供一个指向该工作示例的链接吗？你能提供指向图像的工作链接吗？这将有助于解决这个问题我已经有了两个链接，但关键是：
<div id="clock">
    <img src="http://i.imgur.com/4k04SRS.png" alt="" class="minutes">
    <div class="hours">
        <img src="http://i.imgur.com/9cQMi2m.png" alt="" class="night">
    </div>
</div>

.night {
    /*transform-origin: 120px 0px;*/
    /*-webkit-transform-origin: 120px 0px;*/
}