juanmv94 / 3D-CSS-Slides

A little Three.js experiment I made some years ago trying to combine WebGL and CSS3D together to create HTML interactive 3D slide presentations in a customized WebGL background.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

3D CSS SLIDES

A little Three.js experiment I made some years ago trying to combine WebGL and CSS3D together to create HTML interactive 3D slide presentations in a customized WebGL background. The final result was nice, but not as fast as expected.

See it in action (Youtube):

Video link

What do we learned?

  • Combining two different 3D render techniques (using an alpha channel) is possible and gives nice results, despite not being an optimal solution.
  • CSS3D could be a bit slow if you try to open lots of iframes with lot of javascript and resources each one (slide reflections are also iframes).

Links

Full blog article: http://tragicomedy-hellin.blogspot.com/2017/10/presentacion-de-diapositivas-powerpoint.html

About

A little Three.js experiment I made some years ago trying to combine WebGL and CSS3D together to create HTML interactive 3D slide presentations in a customized WebGL background.


Languages

Language:HTML 40.3%Language:CSS 35.6%Language:JavaScript 24.0%