ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 176

FIGURE 5.17 Without backface
visibility: hidden; , the result
will generally be a mess.

To s e e w hy backface-visibility: hidden; is essential in such situations, try
removing the line from the code and reloading. If backface-visibility: hidden;
is not employed, the effect is spoiled, resulting in the content of both sides being
visible at all times or something unexpected happening ( Figure 5.17 ).

USING HARDWARE ACCELERATION

Across many browsers, 3D animations are hardware accelerated; that is, they are rendered using the GPU
of the device, not just the browser. To take advantage of the smoother rendering this produces, some
developers have started doing 2D transforms using 3D functions. For instance, look at the following simple
example:

transform: rotate(45deg);
Yo u co u l d fo rc e t h e b for ws e r t of u s e h a rd wa re a c c e l e rat i of n fo r t h i s b y a d d i n g a 3 D f u n c t i of n at t h e e n d of f t h e
transform list that does nothing to the element, like so:

transform: rotate(45deg) translate3d(0,0,0);
This is useful if animations are running too slow on a certain device, for example, an Android phone or
iPhone. However, be careful not to change all the prefixed versions of the property, because you might stop
some browsers from using the property (for example, Opera doesn't support 3D transforms at the time of
this writing). So until support is more consistent, you could do this:

-webkit-transform: rotate(45deg) translate3d(0,0,0);
-o-transform: rotate(45deg);