js点击button旋转图片

基础概念

在JavaScript中，点击按钮旋转图片通常涉及到DOM操作和CSS变换。主要使用的CSS属性是transform，它允许我们对元素进行旋转、缩放、移动或倾斜。

类型

固定角度旋转：每次点击都旋转一个固定的角度。
连续旋转：点击后图片持续旋转直到再次点击停止。
递增旋转：每次点击增加一定的旋转角度。

应用场景

产品展示：在电商网站中，用户可以点击查看产品的不同角度。
游戏互动：在游戏中，用户操作导致元素旋转作为反馈。
教育工具：在教学软件中，通过旋转来展示三维模型。

示例代码

以下是一个简单的示例，展示了如何实现点击按钮使图片旋转90度的功能：

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

<img id="myImage" src="example.jpg" alt="Example Image" width="200">
<button onclick="rotateImage()">Rotate</button>

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

</body>
</html>