HTML and CSS Reference
In-Depth Information
You can increase this visual effect by scaling on the Z axis:
1. In styles.css, find the .sidebar:hover rule set and modify the transform declaration:
-webkit-transform: scaleZ(2) translateZ(100px);
2. Save styles.css.
This modification scales the sidebar on the Z axis by 2, meaning the size of the element is the same size as if it were
sitting on the Z axis at 200px, as shown in Figure 13-8. Again, this effect is over the top, but you can make it a little
more sophisticated as you go on.
Figure 13-8 The sidebar scaled on the Z axis by 2.
A transform such as
transform: scaleZ(2) translateZ(100px);
creates the same visual effect as
transform: translateZ(200px);
Search WWH ::

Custom Search