<div class="container">
  <div class="clock">
  <div class="hand hour" data-hand-hour ></div>
  <div class="hand minute" data-hand-minute></div>
  <div class="hand second" data-hand-second></div>
  <div class="number number1">I</div>
  <div class="number number2">II</div>
  <div class="number number3">III</div>
  <div class="number number4">IV</div>
  <div class="number number5">V</div>
  <div class="number number6">VI</div>
  <div class="number number7">VII</div>
  <div class="number number8">VIII</div>
  <div class="number number9">IX</div>
  <div class="number number10">X</div>
  <div class="number number11">XI</div>
  <div class="number number12">XII</div>
  </div>
</div>
*,*::after,*::before {
  box-sizing:border-box;
  margin:0px;
}
.container {
  min-height:100vh;
  background:linear-gradient(to right,hsl(200,100%,50%),hsl(125,100%,50%));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.clock {
  width:300px;
  height:300px;
  background-color:rgba(255,255,255,0.8);
  border-radius:50%;
  border:2px solid black;
  position:relative;
}
.clock::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:black;
  border-radius:50%;
  width:15px;
  height:15px;
  z-index:11;
}
.clock .number {
  --rotation:0;
  position:absolute;
  width:100%;
  height:100%;
  text-align:center;
  transform:rotate(var(--rotation));
  font-size:1.5rem;
}
.clock .number1 {
    --rotation:30deg;
}
.clock .number2 {
    --rotation:60deg;
}
.clock .number3 {
    --rotation:90deg;
}
.clock .number4 {
    --rotation:120deg;
}
.clock .number5 {
    --rotation:150deg;
}
.clock .number6 {
    --rotation:180deg;
}
.clock .number7 {
    --rotation:210deg;
}
.clock .number8 {
    --rotation:240deg;
}
.clock .number9 {
    --rotation:270deg;
}
.clock .number10 {
    --rotation:300deg;
}
.clock .number11 {
    --rotation:330deg;
}
.clock .hand {
  --rotation:0;
  position:absolute;
  bottom:50%;
  left:50%;
  border:1px solid white;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  z-index:10;
  transform-origin:bottom;
  transform:translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock .hand.hour {
  background-color:black;
  width:10px;
  height:35%;
}
.clock .hand.minute {
  background-color:black;
  width:7px;
  height:40%;
}
.clock .hand.second {
  background-color:red;
  width:3px;
  height:45%;
}
setInterval(setClock, 1000);
const elHandHr = document.querySelector("[data-hand-hour]");
const elHandMin = document.querySelector("[data-hand-minute]");
const elHandSec = document.querySelector("[data-hand-second]");

function setClock() {
  const currDate = new Date();
  const secondsRatio = currDate.getSeconds() / 60;
  const minutesRatio = (secondsRatio + currDate.getMinutes()) / 60;
  const hoursRatio = (minutesRatio + currDate.getHours()) / 12;
  setRotation(elHandSec, secondsRatio);
  setRotation(elHandMin, minutesRatio);
  setRotation(elHandHr, hoursRatio);
}

function setRotation(element, rotationRatio) {
  console.log(element)
  element?.style.setProperty("--rotation", rotationRatio * 360);
}

setClock();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.