title: How to set the transform origin to a specific point on the element?
body: <p>In this example I want to rotate the hammer from its bottom so is there a way to know exactly the right coordinates of a specific point on the element or should I randomly try different points?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width: 50%;
  }
  
  .hammer-icon {
    transform-origin: 200px 50px;
    transition: transform .3s ease-out;
  }
  
  .hammer:hover .hammer-icon {
    transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200"&gt;
    &lt;g class="hammer"&gt;
      &lt;circle class="hammer-bg" fill="#FFD466" cx="200" cy="50" r="90"&gt;&lt;/circle&gt;
      &lt;path class="hammer-icon" fill="#FFFFFF" d="M262,32.9l-6.7-6.9c-1.4-1.4-3.6-1.4-5-0.1l-2.8,2.8l-14.6-15c-7-7.2-20.3-18.5-30.1-16.4
        c-1.6,0.3-5.6,3.1-5.6,3.1l19,19.5l-26.3,25.6l-1.5-1.6c-1.4-1.4-3.6-1.4-5-0.1l-39.3,38.3c-1.4,1.4-1.4,3.6-0.1,5l14.4,14.8
        c1.4,1.4,3.6,1.4,5,0.1l39.3-38.3c1.4-1.4,1.4-3.6,0.1-5l-1.5-1.6l26.3-25.6l8.3,8.5l-2.8,2.8c-1.4,1.4-1.4,3.6-0.1,5l6.7,6.9
        c1.4,1.4,3.6,1.4,5,0.1l17.3-16.9C263.3,36.5,263.4,34.3,262,32.9z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>