Animated Virtual Bookshelf With JavaScript And CSS/CSS3

One of the more novel visualizations I have seen on the web in the recent past uses the concept of a virtual bookshelf with vanilla JavaScript and CSS transforms to give the illusion that you are picking out one of many books on a bookshelf when you hover over it.

It uses CSS3 3D transformations with JavaScript to move the book off-screen, rotate it back into position when hovered over. The following is a video that explains how this project was created:

How to use it:

1. Download and load the JavaScript bookshelf.js and Stylesheet bookshelf.css in the document.

<link rel="stylesheet" href="bookshelf.css" />
<script src="bookshelf.js"></script>

2. Add as many books to the bookshelf. Don’t forget to replace the book titles & author names.

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      <span class="spine-title"> Book Title 1</span>
      <span class="spine-author"> Author Name 1</span>
    </div>
    <div class="side top"></div>
    <div class="side cover"></div>
  </div>
  <div class="book">
    <div class="side spine">
      <span class="spine-title"> Book Title 2</span>
      <span class="spine-author"> Author Name 2</span>
    </div>
    <div class="side top"></div>
    <div class="side cover"></div>
  </div>
  ... more books here ...
</div>

Changelog:

09/01/2022

• Added 2 more CSS styles for the book: Pyramid & Stairs