滾動時更改3D視角 - 固定消失點

我正在嘗試構建一個基於3d盒子的小型網頁。這個頁面可以滾動，我希望消失點保持固定在中間，所以當我滾動3D盒時，應該動態改變它們的外觀。我能得到的唯一結果是這樣的：http://deesr.com/3dscroll/滾動時更改3D視角 - 固定消失點

在這個版本中，消失點停留在起點，當我滾動的框保持不變。

編輯：JS做的工作。我使用OnScroll事件來檢查滾動位置並重新設置Perspective-Origin。讓我知道是否有更好的解決方案！

來源

2013-07-01 Timo

我的解決方案是我每次用戶滾動時重置消失點。

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

來源

2013-08-18 19:47:32 Timo

我知道這是遲到的OP，但對於所有其他過這個問題來了：

我能夠通過使用模擬人體的身體內<DIV>解決呢滾動條。

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

完整的示例：

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

來源

2016-02-16 18:39:49

感謝張貼，這一直是一個真正的大開眼界我。無法根據我想要使用它進行調整，但這是一個非常有趣的解決方案。 – cchana

滾動時更改3D視角 - 固定消失點

回答

相關問題