title: Flipping an icon and spinning it in reverse
body: <p>There's an icon in the <a href="http://fortawesome.github.io/Font-Awesome/" rel="nofollow">Font Awesome set</a> that I want to flip horizontally and then spin in that direction, which is the opposite of the regular spin effect.</p>
  
  <p>There are a number of ways to do each, but none that I know that will do both since the effects seem to cancel each other out?</p>
  
  <p>If I flip it,</p>
  
  <pre><code>.fa-refresh {
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: "FlipH";
  }
  </code></pre>
  
  <p>then animate it,</p>
  
  <pre><code>.icon-spin-reverse {
      display: inline-block;
      -moz-animation: spin-reverse 2s infinite linear;
      -o-animation: spin-reverse 2s infinite linear;
      -webkit-animation: spin-reverse 2s infinite linear;
      animation: spin-reverse 2s infinite linear;
  }
  
  @-moz-keyframes spin-reverse {
      0% { -moz-transform: rotate(0deg); }
      100% { -moz-transform: rotate(-359deg); }
  }
  @-webkit-keyframes spin-reverse {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(-359deg); }
  }
  @-o-keyframes spin-reverse {
      0% { -o-transform: rotate(0deg); }
      100% { -o-transform: rotate(-359deg); }
  }
  @-ms-keyframes spin-reverse {
      0% { -ms-transform: rotate(0deg); }
      100% { -ms-transform: rotate(-359deg); }
  }
  @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-359deg); }
  }
  </code></pre>
  
  <p>the flip will be canceled, and it will just spin in reverse.</p>
  
  <p>Is there any way to do both?</p>