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

    <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>