Author: | petargyurov |
---|---|
Views Total: | 1,059 views |
Official Page: | Go to website |
Last Update: | September 1, 2022 |
License: | MIT |
Preview:

Description:
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