Как заставить изображение вращаться, когда я нажимаю кнопку

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

  }

}

Может ли кто-нибудь помочь мне, как завершить sh это. Я хочу заставить img вращаться, когда вы нажимаете кнопку. Я пробовал другой метод (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.com/edit/js-rotate-onclick?file=index.js