Full 3D Worlds in Plain old CSS & JavaScript
summary
Explains how to create full 3D worlds using only CSS 3D transforms and plain JavaScript rather than WebGL2 or WebGPU. Covers the internals of CSS 3D transformations, the browser rendering pipeline, and patterns for structuring JavaScript to achieve real‑time performance for complex, fast web experiences.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:27Full 3D Worlds in plain old CSS & JS
- 0:40This is a css/html only scene
- 1:15Rendered in CSS/HTML
- 1:38Performance?
- 2:303D Geometry: CSS Transforms Order of Operations
- 4:223D Geometry: CSS Matrix Transforms
- 5:273D Geometry: Perspective
- 7:003D Geometry: putting all together
- 8:093D Geometry: let's apply textures!
- 10:043D Geometry: lights & blend modes
- 10:383D Geometry: Shadows
- 12:54Interactions
- 13:49Advanced Geometry: Mixing with (real) 3D Content
- 15:18Advanced Geometry: Custom shapes with html/css
- 18:36April 2010 - Early WebGL demonstration
