CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSIf you choose to use :hover, you should cover the possibility of :focus-only mobile platforms by using a
grouped selector, as shown in the following code:
img.tilt:hover, img.tilt:focus {
-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
Summary
In this chapter you’ve learned the syntax for CSS3 transforms: scale, rotate, skew, and translate, including
how to flip images and combine transformations. I also covered the code for the simplest form of animation,
CSS3 Transitions, showing you how to create transitions, how to modify their timing and delays, and two
common ways to initiate them.
The movement and timing of transitions is most commonly controlled through Bezier curves, although it is
also possible to use the steps function and keyword shortcuts.
In the next chapter, we’ll be exploring how to apply these animation techniques to image elements.