我正在尝试制作具有视差效果的水平剖面。背景中应该有一个图像，其滚动速度与页面不同。
问题是：我希望视差元素包含在父元素中，因此父元素的工作方式有点像子元素的掩码：子元素仅在父元素的边界内可见。
我知道这可以通过在两个背景元素之间设置视差元素来实现，这些元素的背景位于视差元素“上方”并遮挡它，但此方法不适用于我的情况。
我想到的一个明显的想法是在父级上使用溢出：隐藏。然而，这会破坏 3D 变换，因此不存在视差。
如何达到所描述的效果？
这是一个代码笔： https: //codepen.io/rradarr/full/mdwgard。我希望红色矩形在带有黑色边框的“视差容器”之外不可见。
* {
margin: 0;
}
html, body {
height: 100%
}
main {
position: relative;
width: 100%;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
background-color: blue;
}
.static {
min-height: 800px;
}
.parallax-container {
border: solid black 3px;
height: 600px;
width: 100%;
transform-style: preserve-3d;
position: relative;
}
.parallax-child {
position: relative;
width: 100%;
height: 100%;
transform: translateZ(-2px) scale(2.01);
z-index: -1;
}
#img-or-whatever {
height: 900px;
width: …