3D Shading with Box-Shadows

View demo Download source When working with 3D transformed elements, you might notice that they don’t have any shading and appear to be very flat. In real life, objects block light and have shadows. Surfaces can be matte, reflective, and everything in between. Indeed, we can do better. If you need to cast light onto complicated geometry, there are options available such as Photon, but they’re very processor intensive. In this article, I’ll show you a solution that can be applied to objects that only have a few faces. Our example will be a 3D movie gallery with glossy posters and, when the posters are rotated, the sides will contain matte information cards with meta data about the film. The Markup Our page is going to have a few different parts. First, we need a simple wrapper to center everything on the page. Next, we’ll create an unordered list that will contain all of our 3D posters. We’ll add the class “stage” to the ul and “scene” to each li. In our CSS, the stage element will act as a container for the scene elements, which will be their own 3D environment with the perspective property applied. <div class="wrapper"> <ul class="stage"> <li class="scene"></li> <li class="scene"></li> <li class="scene"></li> </ul> </div> For each li, we need to add quite a bit of markup. This will contain our movie poster as well as all the metadata about each movie. In a more robust movie library, this could be done dynamically with some backend code. We’ll keep things simple for the purposes of this example. <li class="scene"> <div class="movie"> <div class="poster"></div> <div class="info">...