html如何设置图片随着鼠标滚轮旋转而旋转 旋转时页面保持不懂

可以使用CSS3中的transform属性以及JavaScript对鼠标滚轮事件的监听来实现图片随着鼠标滚轮旋转而旋转的效果，同时保持页面不动。

下面是一个示例代码：

HTML部分：

<div class="image-container">
  <img src="your-image.jpg" alt="your-image">
</div>

CSS部分：

.image-container {
  position: relative;
  width: 500px; /* 设置容器的宽度 */
  height: 500px; /* 设置容器的高度 */
  overflow: hidden; /* 防止图片溢出容器 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 图片宽度占满容器 */
  height: 100%; /* 图片高度占满容器 */
  transition: transform 0.3s ease; /* 设置过渡效果 */
}

JavaScript部分：

var image = document.querySelector('.image-container img');
var angle = 0;

window.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    angle += 10; // 滚轮向下滚动，角度增加
  } else {
    angle -= 10; // 滚轮向上滚动，角度减少
  }

  image.style.transform = 'rotate(' + angle + 'deg)'; // 旋转图片
  event.preventDefault(); // 防止页面滚动
});

通过监听鼠标滚轮事件，在滚轮滚动时增加或减少旋转角度，然后通过CSS3中的transform属性实现图片的旋转。同时，通过event.preventDefault()方法防止页面滚动，从而实现页面保持不动的效果。