A CSS Dive Trough Google's Powers Of Tech
summary
A Google I/O experiment reproduces the Powers of Ten journey as an interactive 3D site and claims the whole thing is built with CSS and CSS3DRenderer not WebGL or canvas, using a custom framework to make SVGs fold like origami, fake lighting with brightness filters and duplicated shadows, and handle state and sound via Three.js’s CSS3D renderer; the team reports ~9200 lines of Sass and JavaScript, runs smoothly on mobile as well as desktop, and documents browser quirks (preserve-3D, intersections, IE workarounds) and the limits around hundreds, not hundreds of thousands, of entities.
AI-written summary · about
chapters (10)
- 0:00Start
- 4:38Eames Powers of Ten
- 8:35CSS Trick! Add 3D transition to any 2D transition GPU accelerated Doesn't change the look
- 10:24Codename: Sagan
- 11:00foldable()
- 13:07Shading Use Three.js to find the normal, Adjust brightness filter from .65 to 1, depending on angle.
- 14:30SVG compiler Compiles SVGs to one file. Easily embed inline.
- 19:25Respect the spec Split intersecting elements. Even non transformed ones.
- 20:07Warning! Internet Explorer complaints incoming Prepare yourself
- 21:03How does it look?
