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.




File list:
3DShadingWithBoxShadows
......................\css
......................\...\.DS_Store
......................\...\component.css
......................\...\demo.css
......................\...\normalize.css
......................\fonts
......................\.....\codropsicons
......................\.....\............\.DS_Store
......................\.....\............\codropsicons.eot
......................\.....\............\codropsicons.svg
......................\.....\............\codropsicons.ttf
......................\.....\............\codropsicons.woff
......................\.....\............\license.txt
......................\.....\.DS_Store
......................\img
......................\...\.DS_Store
......................\...\poster01.jpg

......................\...\poster02.jpg

......................\...\poster03.jpg

......................\...\still01.jpg

......................\...\still02.jpg

......................\...\still03.jpg

......................\js
......................\..\.DS_Store
......................\..\modernizr.custom.js
......................\.DS_Store
......................\index.html
......................\README.md
__MACOSX
.......\3DShadingWithBoxShadows
.......\.......................\css
.......\.......................\...\._.DS_Store
.......\.......................\...\._component.css
.......\.......................\...\._demo.css
.......\.......................\...\._normalize.css
.......\.......................\fonts
.......\.......................\.....\codropsicons
.......\.......................\.....\............\._.DS_Store
.......\.......................\.....\............\._codropsicons.eot
.......\.......................\.....\............\._codropsicons.svg
.......\.......................\.....\............\._codropsicons.ttf
.......\.......................\.....\............\._codropsicons.woff
.......\.......................\.....\............\._license.txt
.......\.......................\.....\._.DS_Store
.......\.......................\.....\._codropsicons
.......\.......................\img
.......\.......................\...\._.DS_Store
.......\.......................\...\._poster01.jpg
.......\.......................\...\._poster02.jpg
.......\.......................\...\._poster03.jpg
.......\.......................\...\._still01.jpg
.......\.......................\...\._still02.jpg
.......\.......................\...\._still03.jpg
.......\.......................\js
.......\.......................\..\._.DS_Store
.......\.......................\..\._modernizr.custom.js
.......\.......................\._.DS_Store
.......\.......................\._css
.......\.......................\._fonts
.......\.......................\._img
.......\.......................\._index.html
.......\.......................\._js
.......\.......................\._README.md
.......\._3DShadingWithBoxShadows