翻转图标并反向旋转

Question

Font Awesome set里面有一个图标，我想水平翻转然后向那个方向旋转，这与常规旋转效果相反。

每种方法都有多种方法，但是 none 我知道这两种方法都可以，因为效果似乎相互抵消了？

如果我翻转它，

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

然后制作动画，

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

翻转将被取消，它只会反向旋转。

有什么办法可以同时做到吗？

Answer 1

您的 animation 正在覆盖初始 transform。您需要在 animation:

中应用两个 transforms

.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

不加CSS也能解决问题

外面的<i>先翻转里面的<i>。内部 <i> 自旋。看这里：

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

Answer 3

反转动画的简单方法是反转其 CSS 属性的方向，称为 animation-direction。

animation-direction: reverse;

翻转图标并反向旋转

Flipping an icon and spinning it in reverse

html

css

css-animations

font-awesome