title: transform:rotate not working - but works on original mockup
body: <p>I made a fidget spinner animation which we are using for a Sale.</p>
  
  <p>You can see it working perfectly here: <a href="https://jsfiddle.net/e2tt2mao/448/" rel="nofollow noreferrer">https://jsfiddle.net/e2tt2mao/448/</a></p>
  
  <p>However when I apply the same/similar code to the "scene" i am currently making I cant get it to spin at all...</p>
  
  <p>See here: <a href="https://jsfiddle.net/uzfpqysc/8/" rel="nofollow noreferrer">https://jsfiddle.net/uzfpqysc/8/</a></p>
  
  <p>I have tried everything.. I'm not sure why it wont spin in my "second js fiddle link"</p>
  
  <p>Any help is much appreciated! </p>
  
  <pre><code>    @-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
  }
  </code></pre>