clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="clock.css">
    <title>Document</title>
   
</head>
<body>
   
      
        <div id="clockcontainer">
            <div id="hour"></div>     
           <div id="minutes"></div>
       <div id="seconds"></div>    
       </div>
    
    
    <script>
        setInterval(() =>
        {
            var a  = new Date() ;
        var sec= a.getSeconds() ;
   var min  = a.getMinutes()  ;
   var hours = a.getHours(); 
   document.getElementById("hour").style.transform  = "rotate(" + (30*hours + 0.5*min ) + "deg)";
   document.getElementById("minutes").style.transform  = "rotate(" + (6 * min) + "deg)";
   document.getElementById("seconds").style.transform = "rotate(" + (6 * sec) + "deg)";
        },1000) ;
        
       </script>
</body>

</html>