Yeats Yeats - 1 year ago 48
CSS Question

Flipping an icon and spinning it in reverse

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download