CSS 3D playground

A space rather than an object: a back wall and floor with floating words at different depths (translateZ). Move the mouse and the whole scene tilts with you — you literally look around the elements in front. One perspective container; everything underneath is ordinary HTML.

Every bar is a genuinely extruded box (top, front and side faces through preserve-3d), with the scene tilted isometrically. Hovering — or using the legend — shoots a bar upwards through translateZ, casting a blurred shadow onto the floor. Heights come straight from React state.

Each panel contains the next in its own 3D space (nested preserve-3d). One hinge therefore rotates an entire subtree — fold the first panel and everything inside follows. Closed it is a concertina stack; open, a flat strip. Pure transform-origin + rotateY.

A walkable 3D gallery in pure CSS 3D (Pointer Lock): walk down the corridor, look at an artwork and press E for the diegetic information HUD floating in the space around it. Q filters by cluster (the lens). At the end, a portal takes you to the next tint variant — an endless loop on its own full-screen page.