title: CSS Animation changes the element position
body: <p>I have a hexagon inside a circle.</p>
  
  <p>See the initial scenario: <a href="https://jsfiddle.net/njzwfvpf/" rel="nofollow">https://jsfiddle.net/njzwfvpf/</a></p>
  
  <p>Now I want to add an animation rotating the hexagon 360deg inside the circle</p>
  
  <p>This is the existing scenario with the css animation (<a href="https://jsfiddle.net/vp3y0fpz/" rel="nofollow">fiddle here</a>):</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>.rotate {
    -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
            animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  @-webkit-keyframes rotating {
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="350" height="350"&gt;
    &lt;svg width="350" height="350"&gt;
      &lt;circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"&gt;&lt;/circle&gt;
      &lt;circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"&gt;&lt;/circle&gt;
      &lt;circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"&gt;&lt;/circle&gt;
      &lt;circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"&gt;&lt;/circle&gt;
      &lt;circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"&gt;&lt;/circle&gt;
      &lt;svg viewBox="0 0 600 720" width="295" height="205"&gt;
        &lt;g transform="translate(239, 370)" class="rotate"&gt;
          &lt;path&gt;&lt;/path&gt;
          &lt;path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"&gt;&lt;/path&gt;
        &lt;/g&gt;
        &lt;svg viewBox="0 0 600 720" width="507.4" height="799.5"&gt;
          &lt;g transform="translate(105, 395)"&gt;
            &lt;path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"&gt;&lt;/path&gt;
          &lt;/g&gt;
        &lt;/svg&gt;
      &lt;/svg&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that adding the animation the Hexagon changes its position,  it is not inside the circle nanymore.</p>
  
  <p>What am I doing wrong ? How can I fix it?</p>