アナログ時計

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#clock {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color:cyan;
  border: 1px solid black;
  position: relative;
}

#hour {
  position: absolute;
  width: 10px;
  height: 110px;
  background-color:magenta;
  top: calc(50% - 110px);
  left: calc(50% - 5px);
  transform-origin: bottom;
}

#min {
  position: absolute;
  width: 6px;
  height: 170px;
  background-color: yellow;
  top: calc(50% - 170px);
  left: calc(50% - 3px);
  transform-origin: bottom;
}

#sec {
  position: absolute;
  width: 2px;
  height: 180px;
  background-color:greenyellow;
  top: calc(50% - 180px);
  left: calc(50% - 1px);
  transform-origin: bottom;
}

<div id="clock">
  <div id="hour"></div>
  <div id="min"></div>
  <div id="sec"></div>
</div>

setInterval(() => {
  const hourBar = document.getElementById("hour");
  const minBar = document.getElementById("min");
  const secBar = document.getElementById("sec");
  const date = new Date();
  
  let hour = date.getHours(); // 0-23
  let min = date.getMinutes(); // 0-59
  let sec = date.getSeconds(); // 0-59
  
  hourBar.style.transform = `rotate(${hour/12*360 + min/60/12*360}  deg)`
  minBar.style.transform = `rotate(${min/60*360}deg)`
  secBar.style.transform = `rotate(${sec/60*360}deg)`
}, 1000)