In javascript i want to preserve my angle addition after 360 degrees to 360 + and not again from 0 degrees

Question

While transform rotate in javascript whenever I add anything to 360 drgree, it again starts counting from 0 degree and my rotated div reverts backwards to 0 deg if I use transition. I want my rotation to continue in same direction. Please help

Answer 1

i tried my issue separately... and it is working...

<style>
        .container-div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 2px solid #000;
            position: relative;
        }
        .center-div {
            position: absolute;
            margin: auto;
            top:0;
            bottom: 0;
            width: 100%;
            height: 50px;
            border: 1px solid #f00;
            transform: rotate(0deg);
            transition: all 0.3s linear;
        }
        .rotate-click {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #000;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
    </style>

<div class="container-div">
        <div class="center-div"></div>
    </div>
    <div class="rotate-click">rotate</div>

    <script>
        let angle = 0;
        document.querySelector(".rotate-click").addEventListener("click", ()=>{
            angle += 45;
            document.querySelector(".center-div").style.transform = `rotate(${angle}deg)`;
            console.log(angle);
        });
    </script>

thanks to @ControlAltDel and @Barmar