Photon – CSS 3D Lighting Engine

Tom Giannattasio authored a very powerful lighting engine using JavaScript and CSS3, and it is very easy to use – Photon. There are three basic concepts in Photon:

• Photon.Light (A point in 3D space from which faces are lit)
• Photon.Face (A DOM element to shade with a given light)
• render (Tie a light and a face together)

A Quick Start, from the project’s website:

var light = new Photon.Light();
var face = new Photon.Face( $('.face-1')[0] );
face.render(light, true);

That’s it! Styling is handled with CSS, and you can setup as many face and light combinations as you want. There is even the concept of a Photon.FaceGroup, which makes shading multiple faces with a single light source dead easy.

Checkout the awesome examples or view the source on Github.

The post Photon – CSS 3D Lighting Engine appeared first on The Changelog.