block_rotation2.svg

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <g id="everything">
    <rect
      id="background"
      width="100%"
      height="100%"
      fill="#0072bb"
      stroke="blue" 
      stroke-width="9"
    />

    <g id="numbers" fill="white" font-family="verdana">
      <text x="44%" y="24%">4</text>
      <text x="44%" y="24%" transform="rotate(90,50,50)">3</text>
      <text x="44%" y="24%" transform="rotate(180,50,50)">2</text>
      <text x="44%" y="24%" transform="rotate(270,50,50)">1</text>
    </g>
  </g>

  <script>
      var degrees = 0;
      document.body.addEventListener("click", (e) => {
        degrees = degrees - 45;
        everything.style['transform-origin'] = 'center';
        everything.style.transform='rotate(' + degrees + 'deg)';
        everything.style.transition="transform 100ms ease-in-out"
        if (degrees % 90 != 0) {
          background.style['stroke-width'] = "5"
        }
        else{
          background.style['stroke-width'] = "9"
        }
      });

      document.body.addEventListener("contextmenu", (e) => {
        degrees = degrees + 45;
        e.preventDefault();
        everything.style['transform-origin'] = 'center';
        everything.style.transform='rotate(' + degrees + 'deg)';
        everything.style.transition="transform 100ms ease-in-out"

        if (degrees % 90 != 0) {
          background.style['stroke-width'] = "5"
        }
        else{
          background.style['stroke-width'] = "9"
        }
      });
  </script>
</svg>

The JS won't work here directly. Download the file, open it up in your local browser, and try left/right clicking on it.