HTML and CSS Reference
In-Depth Information
The front of the card doesn't need to be rotated for its default state. However,
I've applied a
rotateX(0deg);
transform to it, because it seems to solve a problem
in Firefox in that some of the content on the front of the card is displayed in reverse
when the card flip is triggered, even with
backface-visibility: hidden;
applied.
We i rd b u t t r u e . T h e b ac k of f t h e c a rd i is ro t at e d a ro u n d t h e X a x i is b y 1 8 0 d e g re e is
and set to
backface-visibility: hidden
, because you'll want it to be invisible
and upside down by default.
z-index
is also needed on the front to make it appear
at the front. By default, it would appear behind the back because the back comes
later in the source order.
The last step is to rotate the whole business card by 180 degrees when it is
moused over/focused:
FIGURE 5.16
The default card
state (left) and when hovered
over (right).
#wrapper:hover #inner-wrapper, #wrapper:focus #inner-wrapper {
: ;
}
which produces the result shown in
Figure 5.16
.
