JavaScript 图片旋转实现方法 - 使用 CSS3 transform 属性

JS 可以利用 CSS3 的 transform 属性来实现图片旋转，具体步骤如下：

1. 定义一个 img 标签，并设置其 id 和 src 属性。

<img id='myImg' src='image.jpg'>

2. 使用 CSS 给图片设置初始样式，例如宽度、高度、位置等。

#myImg {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3. 使用 JS 获取图片元素。

var img = document.getElementById('myImg');

4. 使用 JS 给图片添加事件监听器，例如点击事件。

img.addEventListener('click', function() {
  // 在此处添加旋转代码
});

5. 在事件监听器中使用 JS 给图片添加旋转效果。

img.style.transform = 'rotate(45deg)';

完整代码如下：

HTML:

<img id='myImg' src='image.jpg'>

CSS:

#myImg {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

JS:

var img = document.getElementById('myImg');

img.addEventListener('click', function() {
  img.style.transform = 'rotate(45deg)';
});

通过以上代码，您可以实现点击图片时将其旋转 45 度。您可以根据需要修改旋转角度和事件类型，例如使用鼠标悬停事件来实现图片的动态旋转效果。