title: Rotating a SVG path using CSS3 around its own center
body: <p>I have a set of SVG path, one of them is as follows:</p>
  
  <pre><code>&lt;path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3
      c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z
       M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"&gt;&lt;/path&gt;
  </code></pre>
  
  <p>I try to make a rotate-animation with the below code:</p>
  
  <pre><code>.stuck #GOL
  {
    fill: red;
    transform: rotate(90deg);
  }
  
  #GOL
  {
    transition-property: all;
    transition-duration: 2s;
  }
  </code></pre>
  
  <p>The problem is that the path rotates around a distance center which is not regular. I want it to rotate around its own center. I have to use CSS3 (so I can't use svg's own <code>rotate()</code> function).</p>