CSS 3D playground
Prototypes exploring the limits of pure CSS 3D — preserve-3d, perspective and transforms, without WebGL. Each experiment is a proof of concept, not a production component.
The interactive diorama
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.
Isometric 3D bars
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.
Origami: folding panels
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.
Walkable gallery
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.
Open the walkable gallery →full screen · WASD + mouse · Pointer LockFour experiments in pure CSS 3D — from object to space. Tip: click an experiment and use mouse + W/A/S/D or scroll to move around.