CSS3 3D Books on a Shelf
In an attempt to spice up a navigation system I'm working on, I took to CodePen to experiment with some CSS-based 3D books on a shelf. Although I believe the books turned out pretty good, I dashed the effort in lieu of a more simplistic approach. That aside, figured I would share the books I came up with, primarily because web development projects are fun to share. Development Phases Bad Shelves Good Shelves Narrower Shelves Shelves with Taller Books (latest/most developed) Sources The base for this development effort was in part thanks to Intro to CSS 3D Transforms by David DeSandro . Although I completely overhauled and applied all types of modifications, David's examples provided the initial insights. Gradient lines for the edged faces on books is thanks to moz://a's MDN web docs . I originally tried a pseudo :after class for the shelf, but due to perspective incompatibilities, I ended up only using this for the soft blur between