イメージを原点から時計回りに正しく回転させる方法CSS/Javascript

Question

イメージを原点から（回転して）（時計回りに）回転させようとしています。私は正常に私のモーダルに相対的なイメージの絶対的なセンターをセットアップしました。私は数分と数時間の完全なコントロールを持っています。問題は、時間インジケータ（または「手」）を同時に追跡する日期間インジケータ（この場合は夜間のみ）が必要です。私はそれを手動で右に得ることしかできない：manual adjustment。しかし、時間がたつにつれて、それは元の位置、またはそのようなものに戻る、私はすべてのステップを見ていない：out of circle。ここに私のコードは次のとおりです。
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

あなたがしなければならない何がhoursの内部に巣day/night指標です。次に、正確に配置することができます。

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