Flipping an icon and spinning it in reverse - html

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

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

Answer 3

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>