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

Here, the inner wrapper is used for the sizing and positioning, and the design
work is applied to the two front and back <div> is for the front and back of the card.
The outer wrapper <div> is there to add hover and other state change effects to, so
that you don't get that unwanted behavior in some browsers that was discussed
earlier (see the “Firefox Bad Hover?” sidebar). The <div> contents are unimportant
for the purposes of this example, although for a real business card you'd prob-
ably want to mark up the contact details in a more useful way by using an hCard
microformat, for example.
Yo u ' l l fi r s it s e it a it r a n s i it i o n o n it h e i n n e r w r a p p e r a n d it h e n it e l l i it it o p r e s e r v e
the 3D space:
#inner-wrapper {
.
transition: 1.5s all;
: ;
}
Next, set backface-visibility: hidden; on both the front and back <div> :
#front, #back {
.
: ;
}
Then set up the default state of the business card:
#front {
: ;
: ;
}
#back {
: ;
}