title: Rotate element to 360deg using CSS3 Animation
body: <p>I am trying to create a loader animation using CSS3. Here is the code:</p>
  
  <p><a href="http://codepen.io/raaj-obuli/pen/RPeLer" rel="nofollow">http://codepen.io/raaj-obuli/pen/RPeLer</a></p>
  
  <p>If you look at the code, I've entered the css, in <code>@keyframe</code> defn, for rotating the squares from <code>0deg</code> to <code>360deg</code> ( as like below ). But the dices are not rotating. Please  help on this and also let me know if you need more details.</p>
  
  <pre><code>@keyframes tilt{
    0%{
      transform: scale($scaleMin) rotate($rotateStart);
    }
    50%{
     transform: scale($scaleMax);
     background: #BC11FF;
     box-shadow: 0 0 2px #D467FF;
    }
    95%,100%{
     transform: scale($scaleMin) rotate($rotateEnd);
     background: #11A8FF;
     box-shadow: none;
    }
  }
  </code></pre>
  
  <p>PS. CSS is written using SCSS in the code sample.</p>