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.
The base for this development effort was in part thanks to
Intro to CSS 3D Transforms by
Although I completely overhauled and applied all types of modifications, David’s examples provided the initial insights.
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
-Keith D Commiskey
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).
Keith D Commiskey