Rotate Square [JS]

<!DOCTYPE html>
<html>
    <head>
        <title>Rotate Square</title>

        <style>
            #square
            {
                width:100px;
                height:100px;
                background-color: red;
                transform: rotateZ(80deg);
            }
        </style>
    </head>

    <body>
        <h1>
        <div id="square" style="text-align:center; margin-left:50px; margin-top:50px; color:pink; border:1px solid black;">
            Hello
        </div>
        </h1>
        <br/>
        <div style="margin-left:50px; margin-top:50px;">
        <button onclick="rotateSquareL()">Left</button>
        <button onclick="rotateSquareR()">Right</button>
        </div>
        <script>
            var deg = 0;
            function rotateSquareL(){
                if(deg>=5){
                deg = deg - 5;
                document.getElementById('square').style.transform = 'rotateZ('+deg+'deg)';
                document.getElementById('square').innerHTML = deg + 'deg';
                }
            }
            function rotateSquareR(){
                if(deg<=355){
                deg = deg + 5;
                document.getElementById('square').style.transform = 'rotateZ('+deg+'deg)';
                document.getElementById('square').innerHTML = deg + 'deg';
                }
            }
        </script>
    </body>
</html>