Html – How to achieve a panoramic 3D swiper carousel with CSS? – react

I will correct your initial solution, to continue work on your direction.

1. I would place tiles into a flex container instead of using position: absolute. Make.coverflow-container as a flex. Then, you don’t have to apply horisontal transition to each element. Instead, you can do the shift to the whole container when active tile changes.
2. I would recommend instead of using scale, applying transformZ on each tile. Since you are using perspective on the tiles container, we could use its advantage here on tiles, to shift them back from the front. The closer a tile to the center, the far it by Z axis.
3. For more gentle effect, I would also do rotateY on each element progressively – the far a tile from the center, the bigger rotation on Y axis. Also, the more a tile rotated, the more it «shrinks», so we need to move it close to the center. For that we use translateX.
4. Keep in mind, that the order in transform matters. So we first move a tile on its place, and then rotate.

Here are the main changes I made.

const TILE_SIZE = 150;

/* the closer we to the center, the more far we move the tile */
function calcTranslateZ(index, activeIndex) {
    if (index === activeIndex) return -TILE_SIZE * 2.5;
    return -(TILE_SIZE*10 / (Math.abs(index - activeIndex) * slides.length));
}

/* the more you far from center, the smaller the gap */
function calcTranslateX(index, activeIndex) {
  if (index === activeIndex) return 0;
  return Math.pow(activeIndex - index, 3) * 10;
}

/* the closer to the center, the more "exposed the tile" */
function calcRotateY(index, activeIndex) {
  return (activeIndex - index) * 30;
}

/* we shif the container  with the tiles, so the active tile is centralized */
function calcShift(activeIndex) {
  return ((slides.length - 1) / 2 - activeIndex) * TILE_SIZE;
}

/* if a tile far from center, it looks ugly */
function shouldHideTile(index, activeIndex) {
  return Math.abs(activeIndex - index) > 2;
}
  
....
  
// and on the template side
return (
    <>
      <div
        className="coverflow-container"
        style={{
          transform: `translateX(${calcShift(activeIndex)}px)`
        }}
      >
        {slides.map((slide, index) => {
          return (
            <div
              key={slide}
              className={`
                coverflow-item ${
                   index === activeIndex ? "active" : ""
                }
                ${shouldHideTile(index, activeIndex) ? "hidden" : ""}
              `}
              style={{
                transform: `
                  translateZ(${calcTranslateZ(index, activeIndex)}px)
                  translateX(${calcTranslateX(index, activeIndex)}px)
                  rotateY(${calcRotateY(index, activeIndex)}deg) `
              }}
              onClick={() => slideTo(index)}
            >
              {slide}
            </div>
          );
        })}
      </div>
      
   ....
   </>

The full solution is here

The solution will look like that: