如何让图片在我点击按钮时旋转？

Question

我的html

<div id="yabanner">
  <img src="img/ok.jpg">
</div>
<button>Click Me</button>

我的JavaScript

 var button = document.getElementsByTagName('button')[0];
 var image = document.getElementsByTagName('img')[0];

  button.addEventListener('click', slid , false);

  function slid(e) {
    image.src="img/kok.jpg";
    image.style.display="block";

  }

}

谁能帮助我如何完成这个任务。我想让一个图片在点击按钮的时候旋转，我试过其他方法(style.transform)，但没有用:()

Answer 1

你可以使用 transform 如下。

image.style.transform = 'rotate(180deg)';

PS： 你有一些语法错误。完整的程序应该是。

<div id="yabanner">
     <img src="img/ok.jpg">
</div>
<button>Click Me</button>
<script>
var button = document.getElementsByTagName('button')[0];
var image = document.getElementsByTagName('img')[0];
button.addEventListener('click', slid , false);
function slid(e) {
      image.src="img/kok.jpg";
      image.style.display="block";
      image.style.transform = 'rotate(180deg)'; //add this
}
</script>

Answer 2

html:

<div id="yabanner">
  <img id="rotateMe" src="https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<button id="rotateButton">Click Me</button>

代码

console.log('rotate');
function rotateMe() {
  console.log('rotating');
  var element = document.getElementById('rotateMe');
  element.classList.add("rotateMe");
}

document.getElementById("rotateButton").addEventListener("click", rotateMe);

在css上你可以添加所有你需要的动画效果 rotateMe 类。

.rotateMe {
  transition: all 0.8s ease;
  transform: rotate(90deg);
}

一个工作实例。https:/stackblitz.comeditjs-rotate-onclick?file=index.js。