CSS動畫：跨度旋轉

Question

我完全被這個旋轉跨度的例子所困住。 http://jsfiddle.net/C94b8/1/。我想要做的是從輸入旋轉包含val的旋轉，但我不能讓它成爲可能。還嘗試更改跨度到display: inline-block。也沒有工作。

Answer 1

下面是你錯了什麼：有沒有這樣的事情，如rotate(1turn)。旋轉定義爲度：0不旋轉，360是完整旋轉。

是的，你需要設置顯示內聯塊。 另外，Chrome還不支持未加前綴的轉換。相反，您需要使用-webkit-transform。 Firefox支持一切，所以你不必擔心。

此外，您不必使用0%和100%。如果這就是您正在使用的所有內容，則可以使用from和to。

還有一件事：我認爲這是IE不支持rotate。他們想要rotateZ。所以我改變了它。

成品？

@-webkit-keyframes spin { 
    from {-webkit-transform: rotateZ(0deg);} 
    to {-webkit-transform: rotateZ(360deg);} 
} 

@keyframes spin { 
    from {transform: rotateZ(0deg);} 
    to {transform: rotateZ(360deg);} 
} 

header span {   
    display: inline-block; 
    /* All the rest of header span {} code goes here. I didn't copy it all. */ 
}