js点击按钮图片旋转

基础概念

在JavaScript中，实现图片旋转通常涉及到DOM操作和CSS样式变换。通过改变图片元素的transform属性，可以实现旋转效果。

类型

固定角度旋转：图片旋转固定的角度，如90度、180度等。
连续旋转：图片持续不断地旋转，常用于加载动画。
交互式旋转：用户通过点击或其他操作触发图片旋转。

应用场景

加载指示器：显示内容正在加载。
状态切换：如展开/折叠菜单时图标的变化。
游戏元素：在游戏中实现物体的动态效果。

示例代码

以下是一个简单的示例，展示如何在点击按钮时使图片旋转90度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rotation</title>
<style>
  #rotateImage {
    transition: transform 0.5s;
  }
</style>
</head>
<body>

<img id="rotateImage" src="your-image.jpg" alt="Sample Image" width="100" height="100">
<button onclick="rotateImage()">Rotate</button>

<script>
function rotateImage() {
  var img = document.getElementById('rotateImage');
  var currentRotation = img.style.transform === 'rotate(90deg)' ? '' : 'rotate(90deg)';
  img.style.transform = currentRotation;
}
</script>

</body>
</html>

遇到的问题及解决方法

问题：图片旋转后无法恢复到初始状态。原因：每次点击按钮都会添加新的rotate(90deg)样式，而没有移除之前的样式。 解决方法：在设置新样式前检查当前样式，并根据需要切换或重置。

function rotateImage() {
  var img = document.getElementById('rotateImage');
  if (img.style.transform === 'rotate(90deg)') {
    img.style.transform = 'rotate(0deg)'; // 恢复初始状态
  } else {
    img.style.transform = 'rotate(90deg)'; // 设置新状态
  }
}

通过这种方式，可以确保图片在每次点击后都能正确地在原始状态和旋转状态之间切换。