Question

我正在尝试建立一个基于3d框的小网页。这个页面是可滚动的，我希望消失点在中间保持固定，所以当我滚动3d框时应该动态地改变它们的外观。我能得到的唯一结果是：http://deesr.com/3dscroll/

在这个版本中，消失点保持在起始点，当我滚动时，保持不变。

编辑：JS完成了这项工作。我使用OnScroll事件来检查滚动位置并重新设置Perspective-Origin。如果有更好的解决方案，请告诉我们！

Answer 1

我知道OP会迟到，但对于所有其他人来说都是这个问题：

我能够通过使用＆lt; div＆gt;来解决它。在模仿身体滚动条的身体内部。

ws3.recv()

完整示例：

<html>

<head>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    body > * {
      overflow: auto;
      width: 100%;
      height: 100%;
      position: absolute;
      perspective: 1000px;
    }
  </style>
</head>

<body>
  <div>
    3d objects
  </div>
</body>

</html>

Answer 2

我的解决方案是每次用户滚动时重置消失点。

$(window).scroll(function() {
    var scrollLocation = $(document).scrollTop();   
    var vanishingPoint = scrollLocation + window.innerHeight / 2;
    $("#wrapper").css('-webkit-perspective-origin', ' 50% ' + vanishingPoint + 'px');
})

滚动时更改3D透视 - 固定消失点

2 个答案: