How to rotate image (transformed from origin) clockwise correctly CSS/Javascript

Question

I'm trying to rotate an image away from the origin (transformed) in circle, or rather, clockwise. I have successfully setup an absolute center for the images relative to my modal. I have complete control for minutes and hours. The thing is, I need the day period indicator (in this case I only have night time) to follow the hours indicator (or "hand") simultaneously. I only manage to get it right manually: manual adjustment. But over time, it returns to the original position, or something like that, I haven't watched every step: out of 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>

Can't understand exactly what happens, can you put it on fiddle so we can se what's wrong? — emiliopedrollo
– emiliopedrollo, Commented Jan 26, 2017 at 15:49
Can you provide working links to the images? It will help solving this — Giladd
– Giladd, Commented Jan 26, 2017 at 15:57
I already have two links, but here's the fiddle: jsfiddle.net/2hwu7kb0/2 — Rick Stanley
– Rick Stanley, Commented Jan 26, 2017 at 16:06

Serg Chernata · Accepted Answer · 2017-01-26 17:25:10Z

3

What you have to do is nest day/night indicator inside of hours. Then you can precisely position it.

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

I also had to get rid of your custom transform-origin since it's no longer needed and was messing up the positioning.

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

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

edited Jan 26, 2017 at 17:25

answered Jan 26, 2017 at 17:14

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to rotate image (transformed from origin) clockwise correctly CSS/Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related