CSS: «Переполнение: скрытая» альтернатива, которая не нарушает 3D -преобразования ⇐ CSS

[Anonymous]

Я пытаюсь сделать горизонтальный раздел с эффектом параллакса. На заднем плане должно быть изображение, которое прокручивается на другой скорости, чем страница. Работает как маска для ребенка: ребенок видна только в границах родителя. это «Выше» элемент параллакса и препятствует его, но этот метод не применим для моего случая. Это, однако, нарушает 3D -преобразования, поэтому не осталось параллакса. //codepen.io/rradarr/full/mdwgard.
Я хочу, чтобы красный прямоугольник не был виден за пределами "параллакса-контейнера" ​​с черным Border. < /p>

Код: Выделить всё

* {
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: 100%;
background-color: red;
position: relative;
z-index: -1;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/695 ... transforms