Css – Infinite marquee on a 3d/dynamic perspective path? Can it be done?

here i made small infinite scroll example and i think you can a little adapt it and use:
small infinite y scroll example on codepen (no rendering on canvas)

<div class="fullSize">
    <div class="block" style="background: #f88;">any html<br>structure 1</div>
    <div class="block" style="background: #8f8;">any html<br>structure 2</div>
    <div class="block" style="background: #88f;">any html<br>------ structure 3 -------</div>
    <div class="block" style="background: #888;">any html<br>structure 4</div>
</div>  

the main idea of this realization of infinite scroll is using:
mod(yScroll+elementCenter.x, parentElement.width) – elementCenter.x
to set element position

.fullSize {
    --fullWidth: 600px;
    width: var(--fullWidth);
    display: flex;
    justify-content: space-around;
    outline: solid 2px #f00;
    overflow: hidden;
}

.fullSize .block {
    outline: solid 1px #000;
    padding: 10px;
    --pos: calc(mod(calc(var(--yScroll) + var(--xPos)), var(--fullWidth)) - var(--xPos));
    transform: translateX(var(--pos));
    transition-duration: 0.1s;

this script calculate each element x center position which must be scrolled and save it as css variable so css can calculate value for translateX
Also it set scroll from wheel event and add some behaviour when element is going to jump from end to start or vice versa (element become transparent before jump, (if 1/4 width of element is out of bounds it become transparent))

function init(
     fullSize = document.querySelector('.infiniteScroll > .fullSize')
    ,blockSelector = '.block'
) {
    const fullSizeRect = fullSize.getBoundingClientRect()
    const blocks = [...fullSize.querySelectorAll(blockSelector)].map(a=>({el: a, rect: a.getBoundingClientRect()}))
    blocks.forEach((block)=>{
        block.el.style.setProperty('--xPos', `${block.rect.x - fullSizeRect.x + block.rect.width/2}px`)
    })

    fullSize.addEventListener('wheel', w=>{
        w.preventDefault()
        const scrollVal = parseFloat(fullSize.style.getPropertyValue('--yScroll').slice(0,-2)) || 0;
        const scrollLimit = fullSizeRect.width
        //                       to make scroll always in bounds from 0 to +limit
        const limited = (scrollLimit + (scrollVal + w.deltaY/5)%scrollLimit)%scrollLimit 

        blocks.forEach((block)=>{
            const xVal = parseFloat(block.el.style.getPropertyValue('--xPos').slice(0,-2)) || 0;
            if ( Math.abs((scrollVal+xVal)/scrollLimit-1) < 1/4/blocks.length ) {
                block.el.style.opacity = '0.2'; // this must be 0, this is not 0 only to show how it moves
            } else {
                block.el.style.opacity = '';
            }                   
        })

        fullSize.style.setProperty('--yScroll', limited+'px')
    });         
}       

init()

small infinite y scroll example on codepen (no rendering on canvas)