Javascript 如何使元素在拖动时具有动画效果？滑动菜单？

我的想法是我有一个由3个元素组成的“旋转木马”，由箭头键控制。当我用箭头向左/向右移动时，我的3个元素（即文本块）将向左或向右移动，将被一个框剪切，因此它们不会离开屏幕，而是像这样被屏蔽：

卷轴前-

后卷轴-

为此，我设置了箭头键，以递增一个数字，控制每次打开哪个li元素：

  if(event.key == "ArrowRight")
    {
      if(this.midMenuIndex < 2)
      {
        this.midMenuIndex++;
      }
    } else if (event.key == "ArrowLeft")
    {
      if(this.midMenuIndex > 0)
      {
        this.midMenuIndex--;
      }
    } 

if（event.key==“ArrowRight”）
{
如果（此.midMenuIndex<2）
{
这个.midMenuIndex++；
}
}else if（event.key==“箭头左”）
{
如果（this.midMenuIndex>0）
{
此.midMenuIndex--；
}
} 

HTML:

首先

Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯都的普洛因在维利特的莫利斯苏打酒店。梅塞纳斯·乌兰科珀·莫利斯·波苏尔。

第三

对于剪辑，我尝试过：

剪辑路径：inset（10px20px30px40px）

这确实有效，但似乎如果我移动一个li，文本就会被压扁，无法无缝地屏蔽。为了方便起见，我想用它来移动li元素，但我不确定用什么最有效的方法来配合递增的数字来完成这个滚动

剪辑路径是正确的方法还是另一种方法？
以防万一……如果您还不知道，请小心这些方法。