動畫圖像，使其旋轉一圈

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>