通过鼠标向下滚动使得图片开始旋转, 开始旋转后图片便与鼠标无关，并且加速5s后，图片停止旋转恢复初始状态。在图片旋转过程中图片所在容器不移动

好的，这个可以使用CSS3动画和JavaScript来实现。

首先，我们需要定义一个容器，里面包含一张图片：

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

然后，在CSS中定义容器的样式，使其居中并且不可滚动：

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

接下来，我们需要定义图片的样式，使其居中并且旋转：

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 5s ease-out;
}

在这里，我们使用了CSS3的`transform`属性来使图片旋转。同时，我们还定义了一个过渡效果，即在5秒内逐渐改变`transform`属性的值，从而使图片缓慢停止旋转。

最后，我们需要使用JavaScript来检测鼠标滚轮事件，并在滚轮事件发生时改变图片的`transform`属性：

var container = document.querySelector('.container');
var img = container.querySelector('img');

container.addEventListener('wheel', function(e) {
  e.preventDefault();
  img.style.transform = 'translate(-50%, -50%) rotate(' + (e.deltaY * 0.5) + 'deg)';
});

setTimeout(function() {
  img.style.transform = 'translate(-50%, -50%) rotate(0deg)';
}, 5000);

在这里，我们使用了`addEventListener`方法来监听鼠标滚轮事件。当事件发生时，我们通过`e.deltaY`属性获取鼠标滚动的距离，并将其乘以0.5作为旋转角度，然后改变图片的`transform`属性。

最后，我们使用`setTimeout`方法来在5秒后恢复图片的初始状态。

完整代码如下：

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

<style>
.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 5s ease-out;
}
</style>

<script>
var container = document.querySelector('.container');
var img = container.querySelector('img');

container.addEventListener('wheel', function(e) {
  e.preventDefault();
  img.style.transform = 'translate(-50%, -50%) rotate(' + (e.deltaY * 0.5) + 'deg)';
});

setTimeout(function() {
  img.style.transform = 'translate(-50%, -50%) rotate(0deg)';
}, 5000);
</script>