Basics of CSS3 transformations

All modern browsers already support CSS transforms, including mobile browsers. For the first two apps, we'll use four new statements from CSS3 heavily:

• transform: Move, rotate, scale, or skew the HTML element using translate[X,Y,Z](v), rotate[X,Y,Z](v), scale[X,Y,Z](v), and skew[X,Y](v), respectively. All these basic transformations have their 3D alternative, such as rotate3d(x, y, z, angle), that you can use to set transformations in all three dimensions with one statement.

  If you want to perform more transformations on an element, you have to set all of them in a single CSS statement, for example, transform: rotateY(90deg) translateX(100px);.

• transform-style: Using flat or preserve-3d options, you can tell the browser whether you want to apply 3D transformations from parent elements to their child. By default, the browser takes all transformations on a per-element basis, which means that if you, for example, rotate the parent element and then rotate its...