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 check where each div element is positioned:
/* Entire document is using single perspective. */body { perspective:...