无限滚动3d效果

如何实现这个网址的效果

mattrothenberg.com/

要写这样的网址，不得不提有哪些效果

• 上半部分、下半部分比中间区域大，滚动效果一样
• 无限滚动

如何实现:

• 分为上中下三个部分
• 使用transform 实现滚动

上下部分比较大，而且有角度，中间为正常区域。

这里我们用 transform-style: preserve-3d; 来实现3d效果，然后旋转上下两部分。

html

<div class="box">
      <div class="preserve3d">
        <div class="top">
          <ul>
            <li>
              <img
                src='https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa6a19182db54cecbe7c016716ed5725~tplv-k3u1fbpfcp-watermark.image?'>
            </li>

            <!-- 其他自定义 -->
            .......
          </ul>
        </div>
        <div class="middle">
          <div class="full">

              <li>
                <img
                  src='https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa6a19182db54cecbe7c016716ed5725~tplv-k3u1fbpfcp-watermark.image?'>
              </li>
              <!-- 其他自定义 -->
            .......
            </ul>
          </div>
        </div>
        <div class="bottom">
          <ul>
            <li>
              <img
                src='https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa6a19182db54cecbe7c016716ed5725~tplv-k3u1fbpfcp-watermark.image?'>
            </li>
             <!-- 其他自定义 -->
            .......
          </ul>
        </div>
      </div>
    </div>

css

 .preserve3d {
    transform-style: preserve-3d;
    position: relative;
    perspective: 250px;
 }

preserve-3d:表示所有子元素在3D空间中呈现。

perspective:设置元素被查看位置的视图

这里只写用到的关键属性,然后简单的静态页面就会出现。

这是大概样子：

静态页面已经实现，接下来就是让页面滚动起来，并且能无限滚动

无限滚动，只能用transform来实现了，把滚动距离赋值给三个窗口。

这里滚动距离不同，是为了让三个滚动效果能衔接起来，具体滚动效果就是让最下面的延迟滚动，让最上面的提前滚动。让人看起来滚动时是一个屏。

每个页面都有单独的transform,让他们的translate对应的距离，然后滚动到底部时widow scroll到顶部，到底顶部时，让window滚动到底部。这样一个简单页面就实现了。

这样子，一个简单的类似效果就出现了，这里滚动啥的都没有做优化，内容换成文字啥的也都能实现类似效果。

代码一直审核不通过，就暂时不放代码了。大家有啥好的实现方式也可以说说。