HTML and CSS Reference
In-Depth Information
Make it so that the “What Our Customers Are Saying” and “Latest Blog Post” sections rotate only when
hovered over and the newsletter box moves toward the viewer.
3. Change the .sidebar:hover selector to .sidebar aside:nth-child(3):hover.
4. Modify the transform declaration in the aside:nth-child(3):hover rule set to include ro-
tateY() and translateX() functions:
-webkit-transform: rotateY(40deg) translateX(-50px) scaleZ(2) trans-
lateZ(100px);
5. Below the .sidebar rule set, add a new rule set:
.sidebar aside:hover {
-webkit-transform: rotateY(40deg);
}
6. Save styles.css.
Now, when the individual sections of the sidebar are hovered over, they rotate 40 degrees, back to a flat position so
the user can read the contents in 2D. The newsletter box also rotates, but it moves toward the user in a 3D space. By
making the newsletter box “pop” off the screen, you can hope that it will persuade the user to consider signing up for
the Cool Shoes & Socks newsletter.
In the next chapter, you apply smooth animations to these transforms.
backface-visibility
Initial value: visible | Inherited: No | Applies to: All elements with a display declaration relating to block, inline
or table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+
Prefixed browser support: Firefox 10+, Chrome 12+, Safari 4+
As mentioned previously, a 180-degree rotation on the X and Y axes would “flip” an element—as if somebody
picked it up and turned it over. Try this on the .sidebar rule set, for example:
-webkit-transform: rotateY(180deg);
You can see the sidebar from the back, as shown in Figure 13-9.
Search WWH ::




Custom Search