I've been searching for a way that I can figure out (and learn) how to recreate this 3D carousel slider style used in the Salient theme (as seen in the "What they've said about us" and "Our Mugshots" sections of https://themenectar.com/salient/business-2/)

Slider carousel in default (non-sliding) state:

Slider carousel in mid-slide state (Outgoing slide moves to the background and decreases in opacity, scale, etc.)

To me, at least, it's unusual since it's one of the few carousels that pushes slides back "underneath" the slider and creates a kind of "shuffling" effect while also allowing for static content to the left of the slider (rather than most sliders which take up the full width of an interface).

I've searched through a number of online tutorials, codepen examples, and have read through "Intro to 3D CSS transforms" (written by the author of the Flickity slider), but I can't find anything that steers me in the right direction.

I've even licensed the Salient theme in the hopes that I could learn direct from the source. As far as I got is that it's a Flickity slider with the following relevant excerpt in the associated initialization JavaScript:

flkInstanceSlide.find('.inner-wrap-outer').css({
                            'transform': 'perspective(800px) translateX(' + $translateXAmt + 'px) rotateY(' + $rotateAmt + 'deg) translateZ(0)',
                            'opacity': $opacityAmt
                        });

                        flkInstanceSlide.find('.inner-wrap').css({
                            'transform': 'scale(' + $scaleAmt + ') translateZ(0)'
                        });

Admittedly, this could all be very well beyond me. I'm trying to learn to make interfaces that are a little more novel than most of what's out there and use projects like this as a way to learn more about JavaScript, CSS, etc.

Thank you for any & all help.