Programming 3D Applications with HTML5 and WebGL

Chapter 6. CSS3: Advanced Page Effects

The last several chapters showed you how to use WebGL to create stunning content featuring hardware-accelerated rendering of 3D objects, scenes, and animations. As powerful as WebGL is, as of this writing it has a fundamental limitation in that arbitrary HTML content cannot be mapped as a texture on the surface of a 3D object. If we want to apply the 3D techniques we have seen in previous chapters to elements on a page, we have to turn to another HTML5 innovation: CSS3.

With CSS3, single elements or entire pages can be brought to life with animation, image filtering, and 2D or 3D transformations. These features enable the creation of a variety of 3D effects for use in simple games, engaging banner ads, and intuitive user interfaces. In contrast with WebGL, which requires at least rudimentary 3D programming knowledge plus mastery of a library such as Three.js, using CSS3 requires knowing only markup, CSS, and basic JavaScript, perhaps with an assist from a framework like jQuery. This makes CSS3 development much easier than WebGL; however, developers have access only to the features built into the browser. Put another way, 3D CSS trades simplicity and ease of use for power and flexibility.

The 3D features of CSS3 trace their roots back to 3D transitions initially developed by Apple for its Core Animation framework, powering now-familiar user interface effects such as the screen transitions in the iOS Weather application, depicted in Figure 6-1 ...