Бесконечная рамка на пути в 3D/динамической перспективе? Можно ли это сделать? ⇐ CSS

[Anonymous]

(сетка перспективы, которая может быть полезна для иллюстрации того, что я имею в виду) Я пытался создать то, что я бы назвал «бесконечной динамической перспективой». В частности, я использую это видео в качестве образца.
Снимок экрана прилагается.
Любая помощь будет принята с благодарностью.Я рвал на себе волосы, пытаясь адаптировать этот код, который дал аналогичный результат, но все мои попытки превратить его в бесконечную прокрутку вместо работы по оси X мыши потерпели неудачу.< /p>
Преобразование в предыдущей ссылке действительно дает аналогичный эффект (добавлен, чтобы можно было связать код):

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

.left-3d {
position: absolute;
transform-origin: right center;
transform: rotateY(100deg);
top: 0;
bottom: 0;
right: 100%;
}

#left {
transform: translateX(0%);
}

#center {
transform: translateX(-100%);
}

.right-3d {
position: absolute;
transform-origin: left center;
transform: rotateY(-100deg);
top: 0;
bottom: 0;
left: 100%;
}

#right {
transform: translateX(-200%);
}

До сих пор я использовал ванильный html/css/js. Кто-то сказал мне, что этот эффект можно легко воспроизвести в Three.js/R3F, но я не знаю, с чего начать.
Любая помощь будет принята с благодарностью!
РЕДАКТИРОВАТЬ: прошу прощения за оплошность в этом вопросе, я в этом новичок

Подробнее здесь: https://stackoverflow.com/questions/792 ... it-be-done