Ga naar de hoofdinhoud
BVDNET
Arnhem · websites & automatiseringBVDNET
Lab

3D in de browser, met alleen CSS

Proeven met 3D op een webpagina zonder 3D-bibliotheek of WebGL. Het zijn experimenten; ze staan niet op klantsites.

01

De interactieve kijkdoos

Een kleine ruimte met een achterwand, een vloer en woorden die op verschillende diepte zweven. Beweeg je muis en de ruimte kantelt mee, zodat je om de voorste woorden heen kijkt. Alles is gewone HTML, in 3D gezet met CSS.

ÉÉN MANIER VAN KIJKEN
geluid
metaal
licht
code
muis kijkt rond · scroll of W/A/S/D loopt erdoorheen
02

Isometrische 3D-balken

Een staafdiagram van echte 3D-blokken, schuin van boven gezien. Wijs een balk aan, of een regel in de legenda, en hij komt omhoog met een schaduw op de vloer.

13
7
6
4
hoogte · aantal onderwerpen per thema op de Over-mij-pagina
03

Origami: vouwbare panelen

Een strook panelen die je als een harmonica open- en dichtvouwt. Elk paneel hangt aan het vorige, dus als je het eerste vouwt, vouwen de andere mee.

01Systemende regels achter iets zien
02Makenuit elkaar halen en weer opbouwen
03Beeldbeeld en geluid maken
04Verwoordeniets ingewikkelds kort uitleggen
04

Doorloopbare galerie

Een 3D-galerie waar je met toetsenbord en muis doorheen loopt. Druk bij een beeld op E voor uitleg; aan het eind van de gang brengt een portaal je naar de volgende zaal. De galerie draait schermvullend op een eigen pagina.

Open de doorloopbare galerie →volledig scherm · WASD en muis

Tip: klik in een proef en gebruik je muis en W/A/S/D, of scroll, om rond te kijken.