使 Bootstrap3 图标旋转的问题

Question

受Fontawesome 的启发，我正在尝试使用 bootstrap3 制作一个旋转图标。它可以通过 CSS3 过渡和变换轻松实现。问题是图标不围绕中心旋转。它在旋转时摆动。

下面粘贴的代码。有谁知道是什么原因造成的？

.spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <h1 class="text-center">
    <span class="glyphicon glyphicon-refresh spin"></span>
    <span class="glyphicon glyphicon-record spin"></span>
    </h1>

Answer 1

问题是您旋转了一个不在跨度中心的元素。

如果您想要真正的解决方案，请在.spin 上添加transform-origin 以更改旋转中心

.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/

Answer 2

我为此写了一个blog 帖子。只需使用自定义类引用 glyphicon：

<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

glyphicon-spin 类是通过研究 FontAwesome 样式表中的 fa-spin 类构建的：

h4 {
    font-size:18px;
    font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

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

<i class="fa fa-refresh fa-spin-custom"></i>

<br />
<br />

<h4>Glyphicons</h4>
 <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

Answer 3

补充一点，如果遵循这个例子。

关键帧定义需要考虑到某些属性将是非供应商前缀而其他属性不会的情况。例如，在 Chrome 35 中，当前的关键帧定义将不起作用，因为关键帧不是供应商前缀，但 transform 仍然是。

这样的事情应该允许所有当前/未来的情况：

@-moz-keyframes spin
{
    from
    {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin
{
    from
    {
        -wekbit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Answer 4

Font Awesome 有一种非常方便的方式让图标旋转：

http://fortawesome.github.io/Font-Awesome/examples/

Answer 5

以上都不适合我，但这个：

.spin {
        animation: spin infinite 4s linear;
        height: 80px;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

Answer 6

希望这可能对使用 font-awesome 的人有所帮助。

试试这个。

<span class="sync-state pull-right" style="display: none;">
    <i class="fa fa-refresh fa-spin"></i> synching..
</span>

然后在您的 javascript 上按类 onclick 或悬停获取最适合您的元素。

$(".sync-state").fadeIn(); 

活动结束后可以

$(".sync-state").fadeOut();

希望对您有所帮助。 Jquery & Font-awesome

Answer 7

Bootstrap 为您提供了一个已定义的类库来执行此操作。 使用“icon-spin”类和你的图标类 例如：- <i class="icon-refresh icon-spin"></i>