CSS-3D speeltuin
Prototypes om de grenzen van pure CSS-3D te verkennen — preserve-3d, perspective en transforms, zonder WebGL. Elke proef is een proof-of-concept, geen productie.
De interactieve kijkdoos
Een ruimte i.p.v. een object: achterwand + vloer met zwevende woorden op verschillende dieptes (translateZ). Beweeg de muis en de hele scene kantelt mee — je kijkt letterlijk om de elementen vooraan heen. Eén perspective-container, alles eronder is gewoon HTML.
Isometrische 3D-balken
Elke balk is een echte geëxtrudeerde doos (top-, voor- en zijvlak via preserve-3d), de scene staat isometrisch gekanteld. Hover (of de legenda) laat een balk via translateZ omhoogschieten, met een vervaagde schaduw die op de vloer wordt geprojecteerd. Hoogtes komen rechtstreeks uit React-state.
Origami: vouwbare panelen
Elk paneel bevat het volgende in z'n eigen 3D-ruimte (genest preserve-3d). Eén scharnier draait dus een hele subboom mee — vouw het eerste paneel en alles erin veert mee. Dicht is het een leporello-stapel, open een platte strook. Puur transform-origin + rotateY.
Doorloopbare galerie
Een doorloopbare 3D-galerie in pure CSS-3D (Pointer Lock): loop door de gang, kijk 'n werk aan en druk E voor de diegetische info-HUD die ín de ruimte rond 't werk zweeft. Q filtert op cluster (de lens). Aan 't eind loop je door 'n portaal naar de volgende tint-variant — een ring die eindeloos doorloopt. Draait op 'n eigen, schermvullende pagina.
Open de doorloopbare galerie →volledig scherm · WASD + muis · Pointer LockVier proeven in pure CSS-3D — van object naar ruimte. Tip: klik in een proef en gebruik muis + W/A/S/D of scroll om rond te lopen.