title: transform-origin not working in Firefox even properties in percentage value
body: <p>CSS3 <code>transform-origin</code> not working in firefox browser. </p>
  
  <p>I am trying to run <code>transform: rotate(360deg);</code> in <code>@keyframes</code> for <code>&lt;g class="tyre"&gt;</code> as child of <code>&lt;svg class='truck'&gt;</code>. In the result the truck wheel rotation works fine for all other browser except <strong>chrome</strong></p>
  
  <p><a href="https://i.stack.imgur.com/mg19k.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mg19k.jpg" alt="enter image description here"></a></p>
  
  <p>There are similar questions in Stack Overflow unfortunately none of them are related with the question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tyre{
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transform: rotate(0);
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
  }
  
  @-webkit-keyframes spin {
    from   { transform: rotate(360deg); }
    to  { transform: rotate(0deg); }
  }
  @keyframes spin {
    from   { transform: rotate(360deg); }
    to  { transform: rotate(0deg); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class='truck' viewBox='0 0 93 53' xmlns='http://www.w3.org/2000/svg' height="180"&gt;
    &lt;g class='chase' fill-rule='evenodd' fill='none'&gt;
      &lt;path d='M32.087 35.263h3.023V5.973h-3.023v29.29z' fill='#EE7C00'&gt;&lt;/path&gt;
      &lt;path d='M87.84 35.262H5.007v4.065L9.07 43.39h74.707l4.062-4.063v-4.065z' fill='#9B9B9B'&gt;&lt;/path&gt;
      &lt;path d='M35.11 35.262h57.445v-3.966H35.11v3.966z' fill='#F09E00'&gt;&lt;/path&gt;
      &lt;path d='M90.393 35.262h2.16v-3.966h-2.16v3.966z' fill='#E2000F'&gt;&lt;/path&gt;
      &lt;path d='M17.498.493L2.91 15.08v20.182h29.175V.492H17.498z' fill='#FCC400'&gt;&lt;/path&gt;
      &lt;path d='M29.495 2.905H18.16L6.823 14.24h22.67V2.905z' fill='#575656'&gt;&lt;/path&gt;
      &lt;path d='M0 35.262h10.014v-3.966H0v3.966z' fill='#F09E00'&gt;&lt;/path&gt;
      &lt;path d='M5.008 37.294h82.83v-2.032H5.01v2.032z' fill='#575656'&gt;&lt;/path&gt;
      &lt;path d='M.75 29.858h2.16v-6.995H.75v6.995zM11.015 20.074h3.497v-2.16h-3.497v2.16z' fill='#E2000F'&gt;&lt;/path&gt;
      &lt;path d='M28.447 35.262h1.05V14.24h-1.05v21.022z' fill='#EE7C00'&gt;&lt;/path&gt;
      &lt;path d='M53.51 27.23h34.33v4.065H53.51V27.23z' fill='#575656'&gt;&lt;/path&gt;
    &lt;/g&gt;
    &lt;g class='tyre'&gt;
      &lt;path d='M64.827 36.593a9.61 9.61 0 0 0 0 13.59c3.753 3.754 9.837 3.754 13.59 0a9.61 9.61 0 0 0-13.59-13.59' fill='#1A1A18'&gt;&lt;/path&gt;
      &lt;path d='M67.287 39.053a6.13 6.13 0 0 0 0 8.67 6.13 6.13 0 1 0 0-8.67' fill='#9B9B9B'&gt;&lt;/path&gt;
      &lt;path d='M67.287 39.053a6.133 6.133 0 0 0 0 8.67 6.134 6.134 0 0 0 8.67 0l-8.67-8.67z' fill='#C5C5C6'&gt;&lt;/path&gt;
      &lt;path d='M68.784 40.55a4.012 4.012 0 0 0 5.676 5.677 4.012 4.012 0 0 0-5.676-5.676' fill='#868685'&gt;&lt;/path&gt;
      &lt;path d='M65.526 37.293A8.62 8.62 0 1 1 77.72 49.486a8.62 8.62 0 0 1-12.192-12.193m-.385-.386c-3.578 3.578-3.578 9.384 0 12.963 3.58 3.58 9.385 3.58 12.964 0 3.578-3.58 3.578-9.385 0-12.963-3.58-3.58-9.386-3.58-12.964 0' fill='#3B3A39'&gt;&lt;/path&gt;
    &lt;/g&gt;
    &lt;g class='tyre'&gt;
      &lt;path d='M13.038 36.593c-3.754 3.754-3.754 9.838 0 13.59a9.61 9.61 0 0 0 13.59 0c3.754-3.752 3.754-9.836 0-13.59a9.61 9.61 0 0 0-13.59 0' fill='#1A1A18'&gt;&lt;/path&gt;
      &lt;path d='M15.498 39.054a6.128 6.128 0 0 0 0 8.67 6.13 6.13 0 0 0 8.67 0 6.13 6.13 0 0 0-8.67-8.67' fill='#9B9B9B'&gt;&lt;/path&gt;
      &lt;path d='M15.498 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'&gt;&lt;/path&gt;
      &lt;path d='M16.996 40.55a4.012 4.012 0 1 0 5.675 5.677 4.014 4.014 0 0 0-5.674-5.676' fill='#868685'&gt;&lt;/path&gt;
      &lt;path d='M13.737 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.193 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.578 3.58 9.384 3.58 12.962 0a9.164 9.164 0 0 0 0-12.962 9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'&gt;&lt;/path&gt;
    &lt;/g&gt;
    &lt;g class='tyre'&gt;
      &lt;path d='M44.406 36.593c-3.753 3.754-3.753 9.838 0 13.59 3.754 3.755 9.838 3.755 13.59 0 3.755-3.752 3.755-9.836 0-13.59-3.752-3.753-9.836-3.753-13.59 0' fill='#1A1A18'&gt;&lt;/path&gt;
      &lt;path d='M46.868 39.054a6.128 6.128 0 0 0 0 8.67 6.128 6.128 0 0 0 8.67 0 6.128 6.128 0 0 0 0-8.67 6.13 6.13 0 0 0-8.67 0' fill='#9B9B9B'&gt;&lt;/path&gt;
      &lt;path d='M46.868 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'&gt;&lt;/path&gt;
      &lt;path d='M48.364 40.55a4.014 4.014 0 1 0 0 0' fill='#868685'&gt;&lt;/path&gt;
      &lt;path d='M45.106 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.192 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.58 3.58 9.385 3.58 12.963 0 3.58-3.578 3.58-9.384 0-12.962a9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>