使Bootstrap3图标旋转的问题 [英] Issue making Bootstrap3 icon spin

问题描述

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

Inspired by Fontawesome, I'm trying to make a spinning icon with bootstrap3. It's easily achieve via CSS3 transition and transform. Problem is the icon does not not rotate around the center. It swings while rotating.

下面粘贴的代码。有人知道导致问题的原因吗？

Code pasted below. Anyone know what causes the problem?

.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>

推荐答案

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

The issue is that you rotate an element which is not centered in your span.

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

If you want a real solution, add transform-origin on .spin to change the center of rotation

.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/

这篇关于使Bootstrap3图标旋转的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！