在HTML 5 canvas或css3中旋轉jpg

Question

當我在網上看到動畫時，我很新手，我想知道如果有人知道我怎樣才能使用jpg來流式播放mp3，並且在點擊時不斷旋轉。我認爲它可以用html5 canvas或css3轉換完成？但我不知道如何執行此特別是因爲我希望它不斷旋轉，任何幫助非常感謝！

Answer 1

你可以使用CSS3的animation功能：

.spinning { 
    animation-name: rotate; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 

，只是追加紡類每一個對象，你需要旋轉。只需更改animation-duration屬性以使動畫變得更慢或更快。請注意，您必須爲每個CSS3屬性添加供應商前綴'-moz'，'-o'，'-webkit'。例如，對於FF，您將需要：

.spinning { 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
} 
@-moz-keyframes rotate { 
    0% { 
    -moz-transform: rotate(0deg); 
    } 
    100% { 
    -moz-transform: rotate(360deg); 
    } 
} 

。