翻转一个图标并反向旋转 [英] Flipping an icon and spinning it in reverse

问题描述

Font Awesome set 中有一个图标，我想水平翻转然后旋转在这个方向上，这是正常的自旋效应的反面。

有很多方法可以完成每一个，但是我不知道这两个方法都会在效果似乎相互抵消了？

如果我翻转它，

  .fa-refresh {
 -moz-transform：scaleX（-1）; 
 -o-transform：scaleX（-1）; 
 -webkit-transform：scaleX（-1）; 
 transform：scaleX（-1）; 
过滤器：FlipH; 
 -ms-filter：FlipH; 
} 
  

然后为它设置动画，

  .icon-spin-reverse {
 display：inline-block; 
 -moz-animation：自旋反向2s无限线性; 
 -o-animation：自旋反向2s无限线性; 
 -webkit-animation：自旋反转2s无限线性; 
动画：自旋反转2s无限线性; 
} 
 
 @ -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）; } 
} 
  

翻转将被取消，并且它会反转。 / p>

有没有办法做到这一点？

解决方案

c $ c> animation 覆盖了最初的 transform 。您需要在动画中应用变换：

  .fa-refresh {transform：scaleX（-1）;动画：自旋反转2s无限线性;} @关键帧自旋反转{0％{transform：scaleX（-1）rotate（-360deg）; } 100％{transform：scaleX（-1）rotate（0deg）;} }}  

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

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?

解决方案

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>

这篇关于翻转一个图标并反向旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！