In this chapter, we're going to take a quick look at CSS3 3D transformations and introduce some more HTML5 APIs that are specific to mobile devices. With the knowledge gained from the previous chapters, we'll develop four small apps that will make use of the things that we've already learned:
- Basics of CSS3 transformations: We'll learn basics about axes, movement, and rotation in the 3D space and how can we use them to transform HTML elements using CSS3.
- 3D bookshelf rotated using HTML5 DeviceOrientation events: After we learn how to perform basic operations in 3D with CSS3, we can make a slightly more complicated app with nested 3D objects and textures. In order to make it more interactive, we'll listen to
DeviceOrientationevents and rotate the entire scene in 3D as you rotate your device. - Track position and distance using HTML5's GeoLocation API with the Google Maps API: We'll see how to use the Google Maps JavaScript API to track and draw your movement while calculating total distance and drawing the track to the map. For the entire communication between Dart and JavaScript, we'll use the
dart:jslibrary. - Draw into the 2D canvas using onTouch events: We already know how to draw into canvas from the previous chapter; this time, we'll see how to combine it with touch events.
Although some of the APIs covered in this chapter are mobile-specific, you can emulate them in Chrome or Dartium.
By default, mobile browsers add artificial 300 ms delay between the time you release your finger (onTouchEnd) and before a click event is triggered. This is a nice accessibility feature for normal web pages that aren't optimized for mobile browsers, but for web apps that are designed to look and feel native, this is unwanted behavior.
There used to be some nasty workarounds, but browser vendors decided to remove this delay for mobile-friendly (or mobile-optimized) websites. This means that pages that use this header aren't affected by tap delay:
<meta name="viewport" content="width=device-width">
This meta variable tells the browser to set its width to the device width with respect to the pixel density. For example, for iPhone 6 with 1334 x 750 screen resolution, and pixel density 2, the page will be rendered in a browser window with a 667 x 375 resolution. Now as a side effect, it also turns off the tap delay.
We recommend that you use this header for all examples in this chapter unless you know for sure that you don't want it.