有两个容器1，2和一个在容器1中的图片，当最开始鼠标滚动时图片开始旋转且自动旋转，旋转过程中容器1固定不动，旋转到一定速度后容器1平滑切换到容器2，并且图片恢复初始状态。最后当容器2再向上滑动能够切换回容器1

这个需求可以通过JavaScript和CSS来实现。以下是一个简单的实现方式：

HTML代码：

<div id="container1">
  <img src="image.jpg" id="image">
</div>
<div id="container2"></div>

CSS代码：

#container1 {
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

#container2 {
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
  display: none;
}

#image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 2s ease-in-out;
}

.rotate {
  transform: rotate(360deg);
}

.slide-up {
  transform: translateY(-100%);
}

JavaScript代码：

var image = document.getElementById('image');
var container1 = document.getElementById('container1');
var container2 = document.getElementById('container2');

var rotateInterval;

function startRotate() {
  image.classList.add('rotate');
  rotateInterval = setInterval(function() {
    image.classList.toggle('rotate');
  }, 2000);
}

function stopRotate() {
  clearInterval(rotateInterval);
  image.classList.remove('rotate');
}

function switchContainers() {
  container1.classList.add('slide-up');
  setTimeout(function() {
    container1.style.display = 'none';
    container1.classList.remove('slide-up');
    container2.style.display = 'block';
  }, 2000);
}

function switchBack() {
  container2.classList.add('slide-up');
  setTimeout(function() {
    container2.style.display = 'none';
    container2.classList.remove('slide-up');
    container1.style.display = 'block';
  }, 2000);
}

container1.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    startRotate();
  } else {
    stopRotate();
  }
});

container1.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    setTimeout(function() {
      switchContainers();
    }, 2000);
  }
});

container2.addEventListener('wheel', function(event) {
  if (event.deltaY < 0) {
    switchBack();
  }
});

解释一下这段代码的实现过程：

首先，我们获取到需要操作的元素，即图片和两个容器。

然后，我们定义了一些函数来实现不同的功能。`startRotate()`和`stopRotate()`函数用于启动和停止图片的旋转，`switchContainers()`和`switchBack()`函数用于切换容器。这些函数都是通过添加和移除CSS类来实现的，利用CSS中的过渡特性来实现平滑的效果。

接下来，我们给容器1添加了一个滚轮事件监听器，当滚动鼠标滚轮时，如果向下滚动，则启动图片的旋转，否则停止旋转。同时，如果向下滚动，则在2秒后切换到容器2。

容器2也添加了一个滚轮事件监听器，当向上滚动时，切换回容器1。

最后，我们需要在CSS中定义好旋转和平移的过渡效果，让切换过程更加平滑。