Tim*_*imo 2 css 3d scroll perspective
我正在尝试建立一个基于 3d 框的小网页。该页面将是可滚动的，并且我希望消失点保持固定在中间，因此当我滚动时，3d 框应该动态改变它们的外观。我能得到的唯一结果是：http: //deesr.com/3dscroll/
在此版本中，消失点保持在起点，并且当我滚动时，框保持不变。
编辑：JS 完成了这项工作。我使用 OnScroll 事件来检查滚动位置并重新设置透视图原点。如果有更好的解决方案请告诉我！
我知道对于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>