con esta función se puede rotar 90 grados con cada click hasta los 90.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

        <html>
          <head>
            <title>myPage</title>
            <style>
              * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
              }

              .contenedor {
                width: 100%;
                height: 100vh;
                border: 2px solid brown;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .rolover {
                width: 40%;
                height: 30%;
                border: 2px solid navy;
              }
            </style>
          </head>
          <body>
            <div class="contenedor">
              <div class="rolover" id="rol">
                <p>rolover</p>
              </div>
            </div>
          </body>
          <script>
            let rotation = 0;
            Myfunction = () => {
              if (rotation >= 360) return;
              rotation += 90;
              x.style.transform = `rotate(${rotation}deg)`;
            };

            let x = document.getElementById('rol');

            x.addEventListener('click', Myfunction);
          </script>
        </html>

<!-- end snippet -->