Flipping an icon and spinning it in reverse

Question

There's an icon in the Font Awesome set that I want to flip horizontally and then spin in that direction, which is the opposite of the regular spin effect.

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?

If I flip it,

.fa-refresh {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

then animate it,

.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); }
}

the flip will be canceled, and it will just spin in reverse.

Is there any way to do both?

Answer 1

Your animation is overriding the initial transform. You need to apply both of the transforms in your animation:

.fa-refresh {
  transform: scaleX(-1);
  animation: spin-reverse 2s infinite linear;
}
@keyframes spin-reverse {
  0% {
    transform: scaleX(-1) rotate(-360deg);
  }
  100% {
    transform: scaleX(-1) rotate(0deg);
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-refresh"></i>

Answer 2

You can also solve the problem without additional CSS.

The outer <i> flips the inner <i> first. The inner <i> spins. See here:

<i class="fa fa-flip-vertical">
  <i class="fa fa-spin fa-refresh"></i>
</i>

Answer 3

The simple way to reverse your animation is to reverse the direction of its CSS property called animation-direction.

animation-direction: reverse;