HTML and CSS Reference
In-Depth Information
FIGURE 5.24
A decent set of
alternative styles for brows-
ers that don't support 3D
transforms but do support 2D
transforms.
PROVIDING ALTERNATIVE STYLES
By default, the card flip example relies on a 3D transform for sighted viewers to be
able to see both sides of the card. But this is no good for browsers that don't support
3D transforms, like Opera (at the time of this writing). Nonsupporting browsers
will get a class of
no-csstransforms3d
appended to their
<head>
classes, so you
can provide alternative styling like so:
.no-csstransforms3d #wrapper:hover #front, .no-csstransforms3d
p
#wrapper:focus #front {
transform: rotate(-30deg) translate(-50%,-100%);
transition: 0.8s all ease-in;
}
The descendant selector applies a 2D transform to the front face of the card
only when it is a descendant of
.no-csstransforms3d
. 3D rotation supporting
browsers will ignore this styling. In Opera this styling gives you access to the back
of the card, as shown in
Figure 5.24
.
