CSS clock hands don't work properly

Question

I made an analog clock with the help CSSand turned its arrows. This works great, but the problem occurs when I set the start time. for example, if at 12:00, the second hand rotates completely in 60 seconds, the minute hand does the same in 3600 seconds, and the hour hand does it in 43,200 seconds. But if the time is 3:15:20, the second hand should start moving from 20 seconds. In this case, I use CSSto set the starting point to rotate(120deg). But my arrow rotates from 4 to 12 for 60 seconds anyway and just goes to the starting point after that. How to fix it?

Look at the fiddle, there is only the second arrow, but I think the problem is visible: https://jsfiddle.net/vaxobasilidze/fdn28u7g/2/

function setTime(){
    var time = new Date($.now());
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var hourdeg = ((hour%12)*3600+minute*60+second)/43200*360;
    var minutedeg = (minute*60+second)/3600*360;
    var seconddeg = second/60*360;
    $('.hour').css({'transform':'rotate('+hourdeg+'deg)'});
    $('.minute').css({'transform':'rotate('+minutedeg+'deg)'});
    $('.second').css({'transform':'rotate('+seconddeg+'deg)'});
  }

setTime();

.second {
	max-height: 80%;
    margin-left: 20%;
	z-index: 11;
	-webkit-animation:spin 60s linear infinite;
    -moz-animation:spin 60s linear infinite;
    animation:spin 60s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second"/>

Run codeHide result

Answer 1

You change the start of rotation, instead of rotating from 0 to 360, you rotate from 180 to 360.
this will make the animation look slower and it will return from 360 to 180.

You can get around this by wrapping your rotating element in a shell and turning the shell instead.

function setTime() {
  var time = new Date($.now());
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  var hourdeg = ((hour % 12) * 3600 + minute * 60 + second) / 43200 * 360;
  var minutedeg = (minute * 60 + second) / 3600 * 360;
  var seconddeg = second / 60 * 360;
  $('.hour').css({
    'transform': 'rotate(' + hourdeg + 'deg)'
  });
  $('.minute').css({
    'transform': 'rotate(' + minutedeg + 'deg)'
  });
  //$('.second').addClass('.instant')
  $('.second-wrapper').css({
    'transform': 'rotate(' + seconddeg + 'deg)'
  });

}

setTimeout(() => {
  setTime()
}, 500);

.second-wrapper {
  transition: transform 2s ease;
  transform: rotate(0deg);
  transform-origin: center center;
  background-color: WhiteSmoke;
  display: inline-block;
  margin-left: 20%;
}

.second {
  max-height: 80%;
  -webkit-animation: spin 60s linear infinite;
  -moz-animation: spin 60s linear infinite;
  animation: spin 60s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second-wrapper">
  <img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second" />
</div>

Run codeHide result