2

I'm trying to built up a small webpage, which is based on 3d boxes. This page will be scrollable, and i want the vanishing point to stay fixed in the middle, so when I scroll the 3d boxes should change their look dynamically. The only result I was able to get is this: http://deesr.com/3dscroll/

In this Version the vanishing point stays at the starting point, and when i scroll the boxes stay the same.

EDIT: JS did the job. I used the OnScroll event to check the scroll position and re-setting the Perspective-Origin. Let me know if there's a better solution!

2 Answers 2

5

I know it is to late for the OP, but for all others coming across this question:

I was able to solve it by using a <div> inside the body that is emulating the body's scrollbars.

<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>

Full example:

<html>

<head>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    body > * {
      overflow: auto;
      width: 100%;
      height: 100%;
      position: absolute;
      perspective: 1000px;
    }
    div#container {
      width: 200%;
      transform-style: preserve-3d;
    }
    #t,
    #b,
    #l,
    #r {
      margin-left: 45%;
      margin-right: 45%;
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 10px solid black;
      border-radius: 10px;
      transform-style: preserve-3d;
    }
    #t {
      transform: rotateX(270deg);
    }
    #b {
      transform: rotateX(90deg);
    }
    #l {
      position: relative;
      top: 180px;
      left: -60px;
      transform: rotateY(270deg);
    }
    #r {
      position: relative;
      top: -180px;
      left: 60px;
      transform: rotateY(90deg);
    }
  </style>
</head>

<body>
  <div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="container">
      <div id="l">
        <h1>left</h1>
      </div>
      <div id="t">
        <h1>top</h1>
      </div>
      <div id="b">
        <h1>bottom</h1>
      </div>
      <div id="r">
        <h1>right</h1>
      </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>

</html>

1
  • Thanks for posting, this has been a real eye opener for me. Having trouble adapting it for what I'd like to use it for, but it is a really interesting solution for the problem.
    – cchana
    Oct 20, 2017 at 19:51
1

My solution was that I reset the vanishing-point every time the user scrolls.

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.