动画图像，使其旋转一圈

Question

我正在图像变换，旋转和关键帧，但我有一个问题试图让图像旋转在一个圆圈。我把它设置为旋转360deg和两个关键帧0和100.我希望图像从图像的中心点旋转，所以看起来好像加载圆正在加载一些东西。

现在看起来图像从左上角旋转。

有没有人看到我做错了什么？

#spinning-circle { 
 
    animation-name: spinning-circle; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
@-webkit-keyframes spinning-circle { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div id="spinning-circle"> 
 
<img src="http://i.stack.imgur.com/WbNlQ.jpg"> 
 
</div>

Answer 1

添加

#spinning-circle img { 
    width: 100%; 
    height: auto; 
} 

到您的样式

它旋转上的偏移，因为图像比容器大。如果要移动变换的起源，使用transform-origin财产

Answer 2

你需要给它一个transform-origin财产

#spinning-circle { 
 
    animation-name: spinning-circle; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
@-webkit-keyframes spinning-circle { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transform-origin: 125% 125%; 
 
    transform-origin: 125% 125%; 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transform-origin: 125% 125%; 
 
    transform-origin: 125% 125%; 
 
    } 
 
}

<div id="spinning-circle"> 
 
<img src="http://i.stack.imgur.com/WbNlQ.jpg"> 
 
</div>