웹에서 아날로그 시계 구현 질문

웹에서 아날로그 시계 만들긴했는데 시,분,초침이 90도 돌아간상태로 시간이감

5시 41분35초 인데 이런식으로 나옴

어떻게 해야 저걸 원래대로 돌릴까..?

구글에 검색을 해도 내가 잘못검색하고있는건지 안나옴...

Html&Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script>
        setInterval(function () {
            // 현재 시간에 대한 값
            var now = new Date();
            var hours = now.getHours() % 12; // 12시간 기준으로 변환
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            // 시침의 위치를 조정
            var hourHand = document.getElementById("hour");
            var hourAngle = (hours * 30) + (minutes * 0.5); // 시침은 1시간당 30도, 1분당 0.5도 이동
            hourHand.style.transform = "rotate(" + hourAngle + "deg)";

            // 분침의 위치를 조정
            var minuteHand = document.getElementById("minute");
            var minuteAngle = (minutes * 6) + (seconds * 0.1); // 분침은 1분당 6도, 1초당 0.1도 이동
            minuteHand.style.transform = "rotate(" + minuteAngle + "deg)";

            // 초침의 위치를 조정
            var secondHand = document.getElementById("second");
            var secondAngle = seconds * 6; // 초침은 1초당 6도 이동
            secondHand.style.transform = "rotate(" + secondAngle + "deg)";

        }, 1000); // 1초마다 실행
    </script>
</head>

<body class="bg">
    <div>
        <div class="circle">
            <div class="txt">Hello World !</div>
        </div>
        <div class="hour">
            <div class="num n1" id="num1">1</div>
            <div class="num n2" id="num2">2</div>
            <div class="num n3" id="num3">3</div>
            <div class="num n4" id="num4">4</div>
            <div class="num n5" id="num5">5</div>
            <div class="num n6" id="num6">6</div>
            <div class="num n7" id="num7">7</div>
            <div class="num n8" id="num8">8</div>
            <div class="num n9" id="num9">9</div>
            <div class="num n10" id="num10">10</div>
            <div class="num n11" id="num11">11</div>
            <div class="num n12" id="num12">12</div>
        </div>
        <div id="dot"></div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');
.circle {
    background-color: #A5D7E8;
    border-radius: 50%;
    margin: 0 auto;
    width: 700px;
    height: 700px;
    position: absolute;
    left: 50%;    top: 50%;
    margin-left: calc(-350px);
    margin-top: calc(-350px);
    font-family: 'Bruno Ace', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

/* .circle:hover {
    background-color: white;
    transition: 0.7s;
} */
.bg {
    z-index: -5;
    background-color: #0B2447;
}

.txt {
    font-weight: bold;
    font-size: 35px;
    color: #576CBC;
    z-index: 2;
}

.num {
    position: absolute;
    font-size: 20px;
    color: white;
}

.n1 {
    top: 18%;
    right: 290px;
    transform: translateX(60%) translateY(-70%);
}

.n2 {
    top: 30%;
    right: 175px;
    transform: translateX(70%) translateY(-70%);
}

.n3 {
    top: 50%;
    right: 120px;
    transform: translateX(50%) translateY(-50%);
}

.n4 {
    left: 82%;
    bottom: 270px;
    transform: translateX(-50%) translateY(0%);
}

.n5 {
    left: 70%;
    bottom: 150px;
    transform: translateX(-50%) translateY(0%);
}

.n6 {
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
}

.n7 {
    bottom: 145px;
    left: 30%;
    transform: translateX(-50%) translateY(0%);
}

.n8 {
    bottom: 280px;
    left: 17%;
    transform: translateX(-50%) translateY(0%);
}

.n9 {
    top: 50%;
    left: 120px;
    transform: translateX(-50%) translateY(-50%);
}

.n10 {
    top: 29%;
    left: 170px;
    transform: translateX(-50%) translateY(-50%);
}

.n11 {
    top: 16%;
    left: 300px;
    transform: translateX(-50%) translateY(-50%);
}

.n12 {
    top: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
}

#hour,
#minute,
#second {
    position: absolute;
}
#hour {
    /* 시침의 위치 조정 */
    width: 200px;
    /* 시침의 길이 */
    height: 6px;
    /* 시침의 두께 */
    background-color: #000;
    /* 시침의 색상 */
    border-radius: 5px;
    /* 시침의 테두리 곡률 */
    transform: rotate(90deg);
    /* 시침의 초기 위치는 6시 방향으로 */
    transform-origin: left center;
    /* 회전 중심점을 시계의 왼쪽 끝으로 설정 */
    top: 50%;
    /* 시침의 top 위치 설정 */
    left: 25px;
    /* 시침의 left 위치 설정 */
    margin-top: -3px;
    /* 시침의 중심점이 top center로 오도록 위치 조정 */
    margin-left: calc(50% - 25px);
    /* 시침의 중심점이 left center로 오도록 위치 조정 */
}
#minute {
    /* 분침의 위치 조정 */
    width: 270px;
    /* 분침의 길이 */
    height: 5px;
    /* 분침의 두께 */
    background-color: #000;
    /* 분침의 색상 */
    border-radius: 5px;
    /* 분침의 테두리 곡률 */
    transform: rotate(270deg);
    /* 분침의 초기 위치는 12시 방향으로 */
    transform-origin: left center;
    /* 회전 중심점을 분침의 왼쪽 끝으로 설정 */
    top: 50%;
    /* 분침의 top 위치 설정 */
    left: 35px;
    /* 분침의 left 위치 설정 */
    margin-top: -2px;
    /* 분침의 중심점이 top center로 오도록 위치 조정 */
    margin-left: calc(50% - 35px);
    /* 분침의 중심점이 left center로 오도록 위치 조정 */
}
#second {
    /* 초침의 위치 조정 */
    width: 120px;
    /* 초침의 길이 */
    height: 3px;
    /* 초침의 두께 */
    background-color: red;
    /* 초침의 색상 */
    border-radius: 5px;
    /* 초침의 테두리 곡률 */
    transform: rotate(90deg);
    /* 초침의 초기 위치는 6시 방향으로 */
    transform-origin: left center;
    /* 회전 중심점을 시계의 왼쪽 끝으로 설정 */
    top: 470px;
    /* 초침의 top 위치 설정 */
    left: 25px;
    /* 초침의 left 위치 설정 */
    margin-top: -3px;
    /* 초침의 중심점이 top center로 오도록 위치 조정 */
    margin-left: calc(50% - 25px);
    /* 초침의 중심점이 left center로 오도록 위치 조정 */
}

#dot {
    z-index: 0;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #0B2447;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}