HTML and CSS Reference
In-Depth Information
Figure 13-4
The empty div, now viewed from a different perspective origin.
Of course, this is just a visual demonstration to better show how 3D space works on a 2D screen.
To add a real-world 3D effect, remove the previous modifications if you chose to follow them, then go ahead and ap-
ply
translateZ()
, like so:
1.
In styles.css, below the
.sidebar
rule set, add a new rule set:
.sidebar:hover {
-webkit-transform: translateZ(100px);
}
2.
Save styles.css.
Now, when the sidebar is hovered over, it appears to move toward the viewer by 100px, as shown in Figure 13-5.
You may think this effect seems excessive, and I agree! At the moment, the entire sidebar moves forward, which
may get annoying for the user. Shortly, you change this effect so it applies only to the newsletter box, and I explain
why you can't do that just yet.
