是否有可能具有恆定的旋轉DIV或圖像？

我想要一個圖像或DIV開始旋轉點擊類似於一個唱機。是否有可能使它平滑，並與JavaScript？是否有可能具有恆定的旋轉DIV或圖像？

非常提前謝謝！ :)

2011-11-20 Earl Larson

是的，這是可能的。 – JJJ

你能告訴我一個教程嗎？ Thankyou :) –

你必須在CSS3中進行輪換。

@keyframes rotate 
{ 
    0% { transform: rotate(0); } 
    25% { transform: rotate(90); } 
    50% { transform: rotate(180); } 
    75% { transform: rotate(270); } 
    100% { transform: rotate(360); } 
} 

#rotating_div 
{ 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-play-state: paused; 
}

這裏的JavaScript的：

function rotate(id) { 
    div = getElementById['id']; 
    div.style.animation-play-state = running; 
}

這裏的HTML：

<div id="rotating_div" onclick="rotate("rotating_div")"></div>

使用前綴-moz-和-webkit-得到CSS3在FF和其他瀏覽器工作。看看這裏：W3Schools.com

祝你好運！ :)

來源

2011-11-20 11:27:14

謝謝！我怎麼能做到這一點，而不是隻是運行指定的時間，它會繼續旋轉。所以像這樣：動畫定時功能：易線性;但顯然這是行不通的，哈哈。 –

animation-iteration-count說明它應該重複多少次。（你可以使用無限） –

@keyframes rotate { 0％{transform：rotate（0）; } 25％{transform：rotate（50）; } 50％{transform：rotate（120）; } 75％{transform：rotate（250）; } 100％{transform：rotate（360）; } } 如果你這樣做，那麼它會一直褪色 –

搜尋這對谷歌

做一個桶滾

應該給你一個想法:)

https://www.google.co.in/search?q=Do+a+barrel+roll

來源

2011-11-20 09:06:55 Pheonix

可愛（在「阻止它並給我我的搜索結果」的意義上）儘管這是支持瀏覽器，但它根本沒有幫助實現該效果。 – Quentin

謝謝！但是，我將如何保持它持續運動？ –

您需要使用window.setInterval來控制動畫。更多信息here

來源

2011-11-20 09:50:44

我的第一個想法是結合JS定時器和CSS3轉換，但看着w3schools.com，我看到實際上在CSS3中有動畫支持。

我認爲這將被執行如下;

@keyframes rotate 
{ 
    0% { transform: rotate(0); } 
    25% { transform: rotate(90); } 
    50% { transform: rotate(180); } 
    75% { transform: rotate(270); } 
    100% { transform: rotate(360); } 
} 

div #lp 
{ 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-play-state: running; 
}

這是不是一個真正的JS解決方案，但是這是迄今爲止最簡單的解決方案，但如果你的目標瀏覽器不支持CSS3，那麼你可能想使用動畫GIF圖像。

你將不得不使其在其他化網頁瀏覽器工作太，但它只是添加-webkit-標籤和這樣的，關於這個問題的更多信息，請訪問：http://www.w3schools.com/css3/css3_animations.asp這裏：http://www.w3schools.com/css3/css3_2dtransforms.asp

（對不起給那些不喜歡w3schools.com的人）

來源

2011-11-20 09:57:26

Thankyouuu！非常豐富和非常詳細。謝謝你花時間把這些放在一起。我會做一個GIF，但圖像是動態創建的，所以...儘管如此，它仍然可以很好地工作！ CSS3真的讓所有的事情變得簡單很多（而且還有很多funner！）你最好的！ –

是否有可能具有恆定的旋轉DIV或圖像？

回答

相關問題