在mousemove上用平滑的动画翻译Carousel

Question

大家好:)我需要做一些像这样的效果的旋转木马。

factorial

我知道我需要使用和修改translate3d(x,y,z) css的适当性，但我不知道如何使动画在图像和外部div之间平滑地变化。 ＆GT; _＆LT;

＆＃13;

＆＃13;

var mousePointer = document.getElementById('test')

document.addEventListener('mousemove', function(e){
  var x = e.pageX / window.innerHeight;
      x = x * -60;
  mousePointer.style.webkitTransform = 'translateX(' + x + '%)';
  mousePointer.style.transform = 'translateX(' + x + '%)';
})

＆＃13;

#test {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: red;
}

＆＃13;

<div id="test"></div>

＆＃13;

＆＃13;

＆＃13;