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

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 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
https://keithdc.com

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).




Comments

Popular posts from this blog

Memory Recall: An Interview Thought

Installing PHP 5 with Apache 2.2 on Windows

TypeError: Undefined: Redux 4