问题使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

问题是您旋转的元素不在您的范围内居中.

如果你想有一个真正的解决方案,增加transform-origin对.spin改变旋转中心

.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

我写了一篇关于此的博客文章.只需使用自定义类引用glyphicon:

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

该glyphicon-spin级,构建了学习fa-spin的FontAwesome样式表类:

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>