CSS Animation changes the element position
<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>