如何在点击时旋转图像（输入类型图像）答案

【问题标题】：How to rotate image on click (input type image)如何在点击时旋转图像（输入类型图像）
【发布时间】：2016-08-15 15:08:45
【问题描述】：

我有这个：

<input type="image" value="" id="countButton" src="my image here" />

每当有人点击图像时，它应该旋转 90 度。

【问题讨论】：

你能告诉你到目前为止你尝试了什么吗？我们不是来写你的代码的 :) .
我尝试了一些来自互联网的脚本，它们都不适用于输入类型的图像。
这没有问题。你能解释一下你想知道什么，你必须在哪些限制范围内工作，你尝试过什么？写得太宽泛了...

标签： jquery html css image button

【解决方案1】：

您可以使用css 翻转图像。对于 click 事件侦听器，您可以使用 jQuery 或纯 JavaScript。

$("#countButton").click(function() {
    $(this).toggleClass("rotate");
});

.rotate {
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" value="" id="countButton" src="http://dummyimage.com/300x150/000/fff" />

【讨论】：

你能解释一下为什么被否决。我认为答案是完全正确的。给我点赞
谢谢老哥，我现在就试试。
对我不起作用，它只是翻转它而不是点击，只有翻转，当我点击它时，什么也没有发生。
嘿。抱歉，如果我没有发布足够的详细信息，这就是我想要的：每次有人点击图像 - 它都会翻转/旋转，比如说 90 度。你明白我的意思吗？
我详细解释了我想要什么。每次有人点击图片时，它都会旋转，比如说 90 度。

【解决方案2】：

你可以使用jquery来改变一个图片标签的src

$(document).ready(function(){
	$('.flipImage').click(function(){
  	$(this).attr("src", "http://blog.retevis.com/wp-content/uploads/2016/05/New-Enhancements-For-RT3RT8-Software-2.jpg");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="flipImage" src="http://www.cityofchicago.org/content/dam/city/depts/doit/supp_info/software_dev_med.jpg" />

见 jfiddle

https://jsfiddle.net/nkfyk7dz/4/

【讨论】：

我有可能误解了 OP 问题。通过翻转，我认为 OP 的意思是“翻转到不同的图像”，因为另一个答案被否决了。（假设“翻转”的另一个答案是“翻转”）。
我很确定，这不是 OP 的意思。但我们会看到的。 ;)
是的，我同意。我不知道为什么最初的答案被否决了，所以我想我会把这个扔进去。
不适合我，图像只是分散，当我点击它的位置时没有任何反应。