HTML and CSS Reference
In-Depth Information
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);
Search WWH ::

Custom Search