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.
Search WWH ::

Custom Search