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

FIGURE 5.15 Comparing the difference
between transform-style: preserve-3d;
(left) and transform-style: flat; (right).
#p2 {
: ;
}
#back {
: ;
}
This is where transform-style: preserve-3d; comes into play. I used
translateZ() to move the pages into different places along the Z axis, and
preserve-3d forces them to maintain their positions in 3D space ( Figure 5.15 , left).
If I didn't use preserve-3d , the default— transform-style: flat; —would come
into play, and the translateZ() functions would have no visual effect because all
the transitions would stay on the same flat plane (Figure 5.15, right). It is worth not-
ing that setting overflow: hidden; on the wrapper makes everything go flat as well.
The page that flies out for you to read when moused over is handled using a
simple :hover state:
#p1:hover, #p2:hover {
transform: translateX(20rem) rotate(0deg) scale(1.1);
}