灵感来自
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>
解决方法
问题是你旋转一个不在你的span中心的元素。
如果您想要一个真正的解决方案,请在.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; }