HTML and CSS Reference
In-Depth Information
This example isn't perfect. It would be better handled by a series of CSS Ani-
mations triggered by links using JavaScript, because it would mean you could
handle multiple pages flying out and it would be easier to make it keyboard acces-
sible. (You'll look at triggering animations with JavaScript later in the “Animations”
section.)
Also, it doesn't work in Opera and older browsers because they don't support
3D transforms, so you'll need to provide an alternative representation of the data
for those browsers. You'll find out how to do that later in the “Providing Alterna-
tives with Modernizr” section.
BACKFACE-VISIBILITY
backface-visibility
serves a single function: to specify whether an element's
backface (i.e., the reverse view of its content) is visible when the element is rotated in
3D so that its front is facing away from the viewer. To demonstrate using this prop-
erty, let's look at how to create a business card that flips over with a 3D transform
(with realistic dimensions sized in millimeters!). You can find a finished example
in the file two-faced-cheek.html.
Again, I'll ignore the details that aren't directly relevant to the example. The
markup is again pretty simple:
<div id=”wrapper” tabindex=”0”>
<div id=”inner-wrapper”>
v >
>
v >
>
</div>
</div>
TIP:
Adding the
tabindex=
”
0
” attribute is an old trick to make
any element appear in the page's tabbing order and therefore be
keyboard focusable.
