<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="clock">
	  <div class="hours-container">
		<div class="hours"></div>
	  </div>
	  <div class="minutes-container">
		<div class="minutes"></div>
	  </div>
	  <div class="seconds-container">
		<div class="seconds"></div>
	  </div>
	  <div class="circle"></div>
	</div>

	<style>
	
.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #e9bba8;
  height: 20%;
  left: 50%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 3px;
  border-radius: 10px;
}

.minutes {
  background: #bb8771;
  height: 40%;
  left: 50%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 3px;
  border-radius: 10px;
}

.seconds {
  background: #fcdbcc;
  height: 45%;
  left: 50%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 2px;
  z-index: 8;
}

.circle {
  background: #c9b39e;
  height: 20px;
  width: 20px;
  left: calc(50.2% - 10px);
  position: absolute;
  top: 44%;
  transform-origin: 50% 80%;
  z-index: 8;
  border-radius: 50%;
    box-shadow: inset 2px 2px 5px #e0a889, inset -2px -2px 5px #b8836c;
}


	</style>
	<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
	<script>
		hoursDeg = 0;
		minutesDeg = 0;
		secondsDeg = 0;
		
			jQuery(window).scroll(function() {
				hoursDeg += 0.5;
				if(hoursDeg > 360)
					hoursDeg = 0;
				jQuery('.hours-container').animate({
					transform: 'rotate(' + hoursDeg + 'deg)'
                  }, {
					step: function(now,fx) {
					  jQuery(this).css('-webkit-transform','rotateZ(' + hoursDeg + 'deg)'); 
					},
					duration:5000
				},'linear');
				
				minutesDeg += 3;
				if(minutesDeg > 360)
					minutesDeg = 0;
				jQuery('.minutes-container').animate({
					transform: 'rotate(' + minutesDeg + 'deg)'
                  }, {
					step: function(now,fx) {
					  jQuery(this).css('-webkit-transform','rotateZ(' + minutesDeg + 'deg)'); 
					},
					duration:5000
				},'linear');
				
				secondsDeg += 18;
				if(secondsDeg > 360)
					secondsDeg = 0;
				jQuery('.seconds-container').animate({
					transform: 'rotate(' + secondsDeg + 'deg)'
                  }, {
					step: function(now,fx) {
					  jQuery(this).css('-webkit-transform','rotateZ(' + secondsDeg + 'deg)'); 
					},
					duration:5000
				},'linear');
			});
	</script>