CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
and at the Opera Web Developer site (http://dev.opera.com/articles/view/understanding-the-css-
transforms-matrix). While they have the advantage of being shorter and more efficient, matrix transforms are
not human-readable, so I won’t use them for the examples in this book.
■ Note Writing separate transforms will not work to create a combined transformation.
img.tilt { width: 300px; height: 300px; float: left;
transform: translate(50px, -4em);
transform: rotate(15deg);
-webkit-transform: translate(50px, -4em);
-webkit-transform: rotate(15deg); }
With the above CSS the browser will follow the last applicable line of code; that is, the image will be rotated, but not
translated.
CSS Transitions
CSS Transitions are exactly that: a transition from one visual state to another, most often initated by some user
event, such as a mouseover on an element. Transitions, in other words, are point-to-point. If you need to animate
between more than one state and another you will find that CSS Keyframes are better suited for the job. (CSS
Keyframes will be discussed in Chapter 5. )
Note that for the examples in this chapter I’ll be using :hover to initiate transitions, but technically any
modification to the value of an element’s property will trigger a transition for that property.
Let’s return to the first example and create a simple rotation transition for the image on the page. When the
user places their mouse over the image, you want to rotate the element by 7.5 degrees. You’ll do this by adding a
:hover pseudo class to the .tilt selector (:hover can be applied to every element, not just links), as shown in
Listing 2-10.
Listing 2-10. CSS Transform on Hover, no Transition
The code shown in Listing 2-10 will work, but if you try viewing the page in a browser you’ll see that there’s
no animation on mouseover, just an instantaneous flick between one state and the other. You’ll create an
animation between these states by using the transition property (see Listing 2-11).