我怎樣才能旋轉圖像顯示在HTML按鈕

嘿我有刷新按鈕在HTML中，我想旋轉按鈕上的圖像，當我點擊它。我已經使用CSS如下創建效果：我怎樣才能旋轉圖像顯示在HTML按鈕

input.button_refresh { 

margin-left: 600px; 
background: url("../images/refresh.JPG") 0 0 no-repeat scroll ; 
background-position: right; 
font-weight: bold; 
background-color: rgb(80,140,210); 
display: inline-block; 
cursor: pointer; 
height: 20px; /* height of the background image */ 
width: 70px; /* width of the background image */ 
color: threedface; 
border-radius: 6em; 
}

HTML

<input type="image" name="Refresh" value="Refresh" class="button_refresh" onclick="window.location.reload()" />

來源

2012-07-24 Vinay

如果在按鈕沒有文字只需旋轉按鈕：主動使用CSS3轉換。 – SVS 2012-07-24 09:01:13

@SVS ya在按鈕上有文字 – Vinay 2012-07-24 09:04:15

CSS3還沒有完全支持，我建議你創建一個活躍的僞指令類，使用一些照片編輯器自己旋轉圖像並使用它，當然你不會得到平滑的時刻，但它'將支持所有瀏覽器 – 2012-07-24 09:09:29

試試這個

input.button_refresh:active { 
    background: url("../images/otherImage.JPG") 0 0 no-repeat scroll ; /* other image or rotated image */ 
}

入住這DEMO

編輯：增加了一個演示

來源

2012-07-24 09:44:25

仍然不能正常工作 – Vinay 2012-07-24 11:40:35

它應該工作。檢查更新的演示。點擊按鈕，圖像變化.. – 2012-07-24 12:52:42

嗨認爲你可以按照外國人的方式。除此之外，您可以保留一個標誌，並相應地通過調用特定的css類來旋轉圖像。

來源

2012-07-24 09:32:08

我怎樣才能旋轉圖像顯示在HTML按鈕

回答

相關問題