发出使Bootstrap3图标旋转的问题

受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

问题是你旋转了一个不在你的范围中心的元素。

如果您想要一个真正的解决scheme，请在.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

我写了一篇关于这个的博客文章。 只需使用自定义类来引用glyphicon：

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

通过研究FontAwesome样式表中的fa-spin类来构buildglyphicon-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中，当前的关键帧定义将不起作用，因为关键帧不是供应商的前缀，但转换依然存在。

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

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

字体真棒有一个很好的方法让图标旋转：

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

Answer 5

Bootstrap为您提供了一个定义的类库。 使用“icon-spin”类以及图标类例如： – <i class="icon-refresh icon-spin"></i >