How to rotate an image (converted from source) clockwise correctly CSS / Javascript

Question

I am trying to rotate the image from the beginning (transformed) in a circle, or rather, clockwise. I have successfully set up an absolute center for images relative to my modal. I have full control of minutes and hours. The fact is that I need an indicator of the day period (in this case, I have only night time) to monitor the indicator of the clock (or "side") at the same time. I can only manually: manual tuning . But over time, he returns to his original position or something like that, I did not watch every step: outside the circle . Here is my code:
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);

HTML:

  <div id="clock">
      <img src="res/termina_clock/outside.png" alt="" class="minutes">
      <img src="res/termina_clock/inside.png" alt="" class="hours">
      <img src="res/termina_clock/night.png" alt="" class="night">
  </div>

Answer 1

- day/night hours. .

<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>

transform-origin, .

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

https://jsfiddle.net/5ak3zLy0/2/