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 usingtranslate[X,Y,Z](v),rotate[X,Y,Z](v),scale[X,Y,Z](v), andskew[X,Y](v), respectively. All these basic transformations have their 3D alternative, such asrotate3d(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: Usingflatorpreserve-3doptions, 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 child...