Book Image

DART Essentials

Book Image

DART Essentials

Overview of this book

This book is targeted at expert programmers in JavaScript who want to learn Dart quickly. Some previous experience with OOP programming in other languages and a good knowledge of JavaScript are assumed.
Table of Contents (11 chapters)
10
Index

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