[css-transforms] Lifting or recessing elements from the viewport in 3D contexts

[eeeps]

Not sure what spec this belongs in; perhaps this suggestion belongs in the WICG, first? But, here goes nothing:

3D user interfaces benefit greatly from being able to leverage human depth perception to create spatial hierarchies, rather than just using drop shadows and 2D perspective.

For instance, see these examples (1, 2, 3), from this overview of various UX elements present in visionOS.

It would be fantastic to be able to subtly lift or recess elements on the web, using CSS.

[eeeps]

In other words...

Here's a screengrab from a recent WWDC video about designing experiences for spatial interfaces.

The web has a great story for "Spaces" (WebXR), and an evolving one for "Volumes" (<model-viewer> and <model>). But it doesn't have any story at all for that tiny bit of depth exhibited by "Windows".

[eeeps]

The CSS-iest way to do this would be to leverage transforms. Maybe new perspective and perspective-origin values? Adding [css-transforms] to the title.

[eeeps]

And now that I'm looking through the existing transforms issues, I found #4242, which defines the same use case and contains years worth of discussions about it. Closing!