<div class="clock">
   <div class="hour">
     <div class="hr" id="hr"></div>
   </div>
   <div class="min">
     <div class="mn" id="mn"></div>
   </div>
   <div class="sec">
     <div class="sc" id="sc"></div>
   </div>
 </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #091921;
}

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: url("https://i.postimg.cc/hjVspvcJ/clock.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
    inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
    inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

.clock::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1000;
}

.hour,
.min,
.sec {
  position: absolute;
}

.hr {
  width: 160px;
  height: 160px;
}

.mn {
  width: 190px;
  height: 190px;
}

.sc {
  width: 230px;
  height: 230px;
}

.hr,
.mn,
.sc {
  display: flex;
  justify-content: center;
}

.hr::before {
  content: "";
  width: 8px;
  height: 80px;
  background-color: #ff105e;
  z-index: 100;
  border-radius: 5px;
}

.mn::before {
  content: "";
  width: 6px;
  height: 90px;
  background-color: rgb(15, 105, 207);
  z-index: 11;
  border-radius: 5px;
}

.sc::before {
  content: "";
  width: 2px;
  height: 140px;
  background-color: #fff;
  z-index: 10;
  border-radius: 5px;
}

const deg = 6; //360deg / 60(min||sec) => 6
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");

setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30; //360deg / 12 hour => 30
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;

  hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
});