CSS 问题使 Bootstrap3 图标旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19364726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue making Bootstrap3 icon spin
提问by duckegg
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.
受Fontawesome 的启发，我正在尝试使用 bootstrap3 制作一个旋转图标。通过 CSS3 过渡和转换很容易实现。问题是图标不会围绕中心旋转。它在旋转时摆动。
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>回答by Donovan Charpin
The issue is that you rotate an element which is not centered in your span.
问题是你旋转了一个不在你的跨度中居中的元素。
If you want a real solution, add transform-originon .spinto change the center of rotation
如果你想有一个真正的解决方案，增加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;
}
回答by Chad Kuehn
I wrote a blogpost about this. Simply reference the glyphicon with a custom class:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
The glyphicon-spinclass was constructed by studying the fa-spinclass in the FontAwesome stylesheet:
该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>回答by Matt McDonald
An additional point, if following this example.
补充一点，如果遵循这个例子。
The keyframe definitions need to allow for the case where some properties will be un-vendor prefixed and others won't. For example, in Chrome 35 the current keyframe definitions won't work as keyframes isn't vendor prefixed, but transform still is.
关键帧定义需要考虑到某些属性将带有非供应商前缀而其他属性不会的情况。例如，在 Chrome 35 中，当前的关键帧定义将不起作用，因为关键帧没有供应商前缀，但转换仍然是。
Something like this should allow for all current/future cases:
这样的事情应该允许所有当前/未来的情况：
@-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);
}
}
回答by meffect
Font Awesome has a nice convenient way of getting an icon to spin:
Font Awesome 有一种非常方便的方法可以让图标旋转：
回答by Peter Moses
Non of the above worked for me but this:
以上都不对我有用，但这个：
.spin {
animation: spin infinite 4s linear;
height: 80px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
回答by Delino
Hope this might help someone using font-awesome.
希望这可以帮助使用 font-awesome 的人。
Just try this.
试试这个。
<span class="sync-state pull-right" style="display: none;">
<i class="fa fa-refresh fa-spin"></i> synching..
</span>
Then on your javascript just get the element by class onclick or on hover which ever works best for you.
然后在您的 javascript 上按类 onclick 或悬停获取元素，哪个最适合您。
$(".sync-state").fadeIn();
After event action you can
事件操作后，您可以
$(".sync-state").fadeOut();
Hope this help. Jquery & Font-awesome
希望这有帮助。Jquery & Font-awesome
回答by Mudit
Bootstrap provides you a defined class library to do that.
Use "icon-spin" class along with your icon class
For example:- <i class="icon-refresh icon-spin"></i>
Bootstrap 为您提供了一个定义的类库来做到这一点。使用“icon-spin”类和你的图标类例如：- <i class="icon-refresh icon-spin"></i>
