HTML Transformation Limitations: "iOS Alarm Clock"-like Animation

Question

For my website, I wanted to achieve an effect inspired by the Apple iOS alarm clock animation:

More specific, the effects I want to achieve are:

1. Styling according to screen position (same style on top and bottom, transition to style in the center)
2. Upscaling in the center, downscaling on top/bottom (as if content was closer to the viewport in the middle)
3. Rotation along the x-axis (on top/bottom, in center no rotation)

How I want these effects to look visually:

As you can see in this gif, I kind of achieved those effects:

My solution uses a GSAP Scroll Trigger on each element (i.e. every card, dot and so on). Every element is then animated relatively to the scroll position with CSS transform functions:

// Start point on bottom of screen
filter: brightness(0.8);
transform: perspective(1400px) rotateX(-30deg) scale(0.9);
// End point in center of screen
filter: brightness(1);
transform: perspective(1000px) rotateX(0) scale(1);

Of course, this priciple of animating each element one by one has many drawbacks. So my question is: are there simpler ways to achieve a similar or even better effect? Primarily I would be interested in solutions where the parent conatiner of all those elements is transformed, rather then transforming them one by one.

1. As far as I understand, this is not possible with plain CSS transform functions, is it?
2. Are there any tricks which could be leveraged to achieve such a transformation
3. Is there a JS/HTML library that could be used for this?