With the getUserMedia API, a video element, a canvas element and LiuLiu’s excellent face detection algorithm, we can easily play around with webcam video data in the browser, plug-in free. To this end, I’ve created two experiments, one that places a mask over your face as you move and another that attempts to scale content based on your distance from the screen.
In my original post I explained how to create a CSS only modal pop-up using :target, pseudo-elements and pointer events. This had a number of caveats, any browser that didn’t support pointer events would see a non-clickable page and the forward/back controls would navigate through dialogues, which is usually undesirable. This follow-up addresses those concerns and creates a more production-ready version.
With CSS3’s 3D transforms it is possible to create a sphere-like object, albeit with many elements. Recently I’ve been looking at creating applicable 3D carousels. These rely on positioning panels in a circle around a central point (ie. rotation about the Y-axis), I put these panels in an unordered list. A natural extension is to duplicate each
<ul> and rotate about the X-axis, creating a sphere.