单击按钮时如何使图像旋转

Question

My html

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

My 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";

  }

}

Can someone help me how to finish this. I want to make a img rotate when u click the button.I tried other method(style.transform) but doesn't work:(

Answer 1

You can use transform as follows:

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

PS: you have some syntax mistakes. The complete program would be:

<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

The 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>

The code:

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

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

On css you can add all animations that you need on the rotateMe class:

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

A working example: https://stackblitz.com/edit/js-rotate-onclick?file=index.js