html - 如何旋转显示在 html 按钮上的图像

Question

嘿，我在 HTML 中有刷新按钮，我想在单击该按钮时旋转该按钮上的图像。我使用 css 创建了如下效果：

 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()" />

Answer 1

您好，您可以按照 Alien 的方式进行操作。除此之外，您可以保留一个标志并通过调用特定的 css 类来相应地旋转图像。

Answer 2

试试这个

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

检查此演示

编辑：添加了一个演示