我正在使用带有font-face(
twitter bootstrap/font-awesome)的CSS变换/动画来生成一个微调Gif的图标.
问题是,图标摆动360度左右. See this JSFiddle看看我的意思.有谁知道如何使它不摆动？或者至少使它旋转一点更顺利？
以下是以下代码：
CSS：
i.icon-repeat {
-webkit-animation: Rotate 500ms infinite linear;
-moz-animation: Rotate 500ms infinite linear;
-ms-animation: Rotate 500ms infinite linear;
-o-animation: Rotate 500ms infinite linear;
animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
from {-ms-transform:rotate(0deg);}
to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
#iconRepeatMain{
display: inline-block;
position: absolute;
z-index:10007;
left: 50%;
top: 50%;
margin-left: -24px; /* -1 * image width / 2 */
margin-top: -24px; /* -1 * image height / 2 */
font-size:36px;
}
HTML：
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"> <i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>
注意：如果有人想在您自己的网络应用程序中使用此代码,请确保在需要执行的操作完成后将其从DOM中删除.保持此图标在背景中旋转会烧毁cpu,而不管您不会相信浏览器.另外,简单地切换其可见性,即display：none,不起作用.您需要从DOM中删除它：$(‘#iconRepeatMain’).remove();
解决方法
默认情况下,CSS使用属性transform-origin来转换关于它们的垂直和水平中心的事物.此默认值的简短语法为50％50％,表示原点的x值和y值.
对于这个图标,我发现将y原点移动到38％可以让它有所改善,但你需要玩弄它来获得精确的值. View on JSFiddle
i.icon-repeat {
-webkit-transform-origin:50% 38%;
-moz-transform-origin:50% 38%;
-ms-transform-origin:50% 38%;
-o-transform-origin:50% 38%;
transform-origin: 50% 38%;
}
更多关于变换起始属性,我建议the MDN article on the property.
