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