javascript ile analog saat | Cevap #12392

<!DOCTYPE html>
<html lang="tr">
<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">
    <title>Analog Saat</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .analog-saat{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background:rgb(25, 3, 125);
            width: 320px;
            height: 320px;
            padding: 0;
            margin: 0;
            border: 20px solid rgb(90, 90,90);
            border-radius:  50%;
        }
        span{
            position: absolute;
            inset: 20px;
            text-align: center;
            transform: rotate(calc(30deg * var(--i)));
            /* border: 5px solid white; */

        }
        span > p {
            font-weight: 400;
            font-size: 18px;
            color: white;
            margin: 0;
            padding: 0;
            transform:  rotate(calc(-30deg * var(--i)));
        }
        hr{
            position: absolute;
            border: 0;
            outline: 0;
            margin: 0;
            padding: 0;
            transform-origin: bottom ;
            border-radius: 25%;
        }
        .saat{
            width: 7px;
            height: 60px;
            background-color: white;  
            /* border: 1px solid lime;      */
            margin-bottom: 60px;   
            
        }
        .dakika{
            width: 5px;
            height: 80px;
            background-color: white;
            margin-bottom: 80px;
        }

        .saniye{
            width: 2px;
            height: 130px;
            background-color: red;
            margin-bottom: 130px;
            z-index: 99;
        }
        .orta{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            /* margin-bottom: 20px; */
            background-color: goldenrod;
            z-index: 99;
        }
       
       
    </style>
</head>
<body>
    <div class="analog-saat">
       <span style="--i:1;"><p>1</p> </span>
       <span style="--i:2;"><p>2</p> </span>
       <span style="--i:3;"><p>3</p> </span>
       <span style="--i:4;"><p>4</p> </span>
       <span style="--i:5;"><p>5</p> </span>
       <span style="--i:6;"><p>6</p> </span>
       <span style="--i:7;"><p>7</p> </span>
       <span style="--i:8;"><p>8</p> </span>
       <span style="--i:9;"><p>9</p> </span>
       <span style="--i:10;"><p>10</p> </span>
       <span style="--i:11;"><p>11</p> </span>
       <span style="--i:12;"><p>12</p> </span>
      
       <hr class="saat">
       <hr class="dakika">
       <hr class="saniye">

       <div class="orta"></div>
    </div>

    <script>

        const saatCubugu = document.querySelector('.saat')
        const dakikaCubugu = document.querySelector('.dakika')
        const saniyeCubugu = document.querySelector('.saniye')
        const interval= setInterval( sg,1000)
        
        
        function sg (){
        
        let zaman = new Date()
        let saat=zaman.getHours()
        let dakika=zaman.getMinutes()
        let saniye=zaman.getSeconds()
        saatCubugu.style.rotate=`z ${saat*30}deg`
        dakikaCubugu.style.rotate=`z ${dakika*6}deg`
        saniyeCubugu.style.rotate=`z ${saniye*6}deg`
        }
             
    </script>
</body>
</html>
saniye çubuğunu hiç duraksamadan akıp gidecek şekilde nasıl gösterebilirim.
transition la denedim olmuyor.