block_rotation.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>
    window.addEventListener("DOMContentLoaded", () => {
      var degrees = 0;
      
      document.body.addEventListener("click", (e) => {
        degrees = degrees - 45;
        everything.style['transform-origin'] = 'center';
        everything.style.transform='rotate(' + degrees + 'deg)';
      });

      document.body.addEventListener("contextmenu", (e) => {
        degrees = degrees + 45;
        e.preventDefault();
        everything.style['transform-origin'] = 'center';
        everything.style.transform='rotate(' + degrees + 'deg)';
      });
    });
  </script>
</svg>