3D All of the Things
summary
CSS 3D actually moves real DOM elements with interactivity intact and is usable on mobile and modern desktop browsers but preserve-3d missing in IE10 collapses nested transforms so complex scenes fail there. Demos include receding layers implemented with translateZ -250px, card flips and math-driven carousels (cube, pentagon, octagon) generated from n and trig, and a production Google Map Dive that pairs WebGL with the CSS 3D renderer across seven Chrome instances and works. Near-future option: CSS custom filters on GPU are C shaders in Chrome behind a flag.
AI-written summary · about
chapters (18)
- 0:00Start
- 1:11Google Map Dive
- 1:49Webgl
- 3:01Mobile Transitions
- 3:583d Coordinate Systems
- 5:12Move Things Around in 3d
- 6:32Rotating in 3d
- 8:00Interactive Elements
- 8:46Angle Perspective
- 11:43Preserved 3d
- 13:58Card Flip
- 15:03Back Phase Visibility
- 16:26Carousels
- 17:27Pentagon
- 18:03Octagon
- 22:47Css Custom Filter
- 23:34The Css Filter Lab
- 24:26Css Transitions
related talks
26mCSS 5DX
25mBring Your Applications to Life with 3D CSS Animations
27mA CSS Dive Trough Google's Powers Of Tech
33mFull 3D Worlds in Plain old CSS & JavaScript
31mCascading Perspectives with THREE CSS3DRenderer
01h 08mThe quest for the graphical web
17mBuilding Immersive Experiences on the Web
39mModern CSS for Creative Developers