Question

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

有很多种方法可以做到，但是我知道这两种方法都不会，因为效果似乎相互抵消了吗？

如果我翻转它，

.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。您需要同时应用transforms中的animation：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您也可以在没有其他CSS的情况下解决问题。

外部if (this.props.loginState.authenthicated === true) { this.props.navigation.dispatch( NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: 'Main' })], }) ) }首先翻转内部<i>。内部<i>旋转。见这里：

<i>

Answer 3

反转动画的简单方法是反转其CSS属性（称为动画方向）的方向。

animation-direction: reverse;

翻转图标并反向旋转

3 个答案: