Getting Fancy - Jump Start CSS - page 140

Figure 5.4. The black outlines represent the original space occupied by the box; the small black squares
represent the point of rotation
Combining Transitions and Transforms
Allthetransforms we'vediscussed sofararestatic. That istosay,their endresult canbeseen,
but they won't animate to get there. The real power of transforms comes when combining
them with transitions and animations. For RecipeFinder, let's incorporate a couple of trans-
forms that will occur when the user hovers their mouse over certain elements.
First, we'll add to our styles to our two button elements:
.promo-btn {
display: inline-block;
width: 208px;
padding: 13px 0;
background-color: #6c0733;
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
font-size: 20px;
color: #fefefe;
transition: transform .5s ease-out;
}
.promo-btn:hover {
text-decoration: none;
transform: scale(1.05);
}
Here we're applying a transition on the transform property, using a duration of .5s and a tim-
ing function of ease-out . When the user hovers over either of the two buttons, the speci-
fied scale transform occurs, increasing the size of the button slightly.
Now let's add a rotation transition to the Twitter icons in our “Yummy Tweets” section:
.tweet:before {
content: url(../images/twitter-icon.png);
display: block;
position: absolute;