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

我的html

---

有人能帮我完成这个吗。我想在您单击按钮时进行img旋转。我尝试了其他方法（style.transform），但不起作用：（

您可以使用

transform

，如下所示：

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

  }

}

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

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

点击我
var button=document.getElementsByTagName（'button'）[0]；
var image=document.getElementsByTagName（'img'）[0]；
按钮。addEventListener（'click'，slided，false）；
函数（e）{
image.src=“img/kok.jpg”；
image.style.display=“block”；
image.style.transform='旋转（180度）'；//添加此
}

html：

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

在css上，您可以在

rotateMe

类中添加所需的所有动画：

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

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

一个有效的例子：

---

旋转2D或旋转并显示背面？您能提供不起作用的代码吗？

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

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