A 3D bookshelf with DeviceOrientation events

We already saw the basics, and we can start with a more attractive app, for example:

Each book is made out of six div elements and the shelf itself are five div elements (we don't need the back face):

<div id="book-container">
  <div class="book dune-new">
    <div class="front"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
      
  <div class="book dune-old"><!-- 6 book's faces again --></div>
  <div class="shelf"><!-- 5 shelf's faces --></div>
</div>

The CSS for this example is not that complicated; there are just a lot of transformations. Feel free to open this example in the browser and...