我正在尝试建立一个基于 3d 框的小网页。 这个页面将是可滚动的，我希望消失点固定在中间，所以当我滚动时，3d 框应该动态地改变它们的外观。我能得到的唯一结果是:http://deesr.com/3dscroll/
在此版本中，消失点保持在起点，当我滚动时，框保持不变。
编辑:JS 完成了这项工作。我使用 OnScroll 事件检查滚动位置并重新设置 Perspective-Origin。让我知道是否有更好的解决方案!
最佳答案
我知道对 OP 来说已经太晚了，但对于遇到这个问题的所有其他人来说:
我能够通过在模拟主体滚动条的主体内使用
来解决它。
<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>关于css - 滚动时更改 3D 透视 - 固定消失点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17403938/