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


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 books. The pseudo class approach I tried was based on this Stack Overflow: Answer by jme11 with a Demo on Bootply

See the Pen Shelves with Taller Books by Keith D Commiskey (@KeithDC) on CodePen.
-Keith D Commiskey

Update [2019-11-07]

The more simplistic approach I took was with rotating just one plane, as opposed to animating 3, 4, 5, or 6 panes on each book as I was doing above. Yet as simplistic as they may be, I believe they turned out pretty good (for a non-designer).


Popular posts from this blog

Learning Mobile App Development via Flutter

Instructing My First Tutoring Course [2019 Sep-Oct]