Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS3D CSS Transforms and Transitions for UI Elements
As a general rule, the requirement for clear navigation means that UI elements should employ as few visual “tricks”
as possible. The following technique, derived from work pioneered by Hakim El Hattab (http://hakim.se, used
with permission), uses the opposite approach: when the navigation is focused, the rest of the page is transitioned
in 3D. A variation of the code is shown in Listing 9-20. You can see the results in Figure 9-13.
Listing 9-20. HTML Code for Side-Pull Navigation
<!doctype html>
►
Deigods of Asgard
HWÆT, WE GAR-DEna in geardagum, þeodcyninga þrym gefrunon.....
Figure 9-13. Body content transformed with CSS3 with side-pull navigation