使用CSS无限滚动图片

Question

我想要一个缓慢且反复滚动的全景图像-好像我们有一个缓慢滚动的感光鼓，图像粘贴在侧面。有关此类鼓的动画，请参见https://imgur.com/a/AOdQC7T。理想情况下，我想在HTML / CSS中执行此操作，而我的尝试尝试在这里：

但是，该动画的环绕效果不如鼓动画。

      .verticalSpin {
         animation: spinVertical 5s linear infinite;
      }
      .verticalRoll {
         animation: rollVertical 5s linear infinite;
      }
      .verticalRoll:hover, .verticalSpin:hover {
          animation-play-state: paused
      }
      
      @keyframes spinVertical {
         0% {
            transform: rotateY(0deg);
         }

         100% {
            transform: rotateY(360deg);
         }
      }

      @keyframes rollVertical {
         0% {
            margin-left: 100px;
            margin-right: -100px;
         }

         100% {
            margin-left: -100px;
            margin-right: 100px;
         }
      }

   <div style="text-align: center;">
      <div class="verticalRoll">
        <img style="width: 100%; max-width: 300px;"
           alt="home" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />    
      </div>
      <p style="font-family: arial, helvetica, serif; color: blue; border: 1px solid blue; padding: 10px; border-radius: 5px; background-color: lightblue; color: blue;">
         Image Animation.
      </p>
   </div>

将感谢任何帮助/指针来实现这一目标！非常感谢！