2D Transforms and Transitions - Beginning CSS3 - page 457

eXercISe: ScaLING aND rOtatING IMaGeS SMOOthLY

The example in scale_3.html earlier in this chapter scaled up images when hovered over. But there were
two problems: the instant change in state was jarring, and the following text was hidden. With the help of
transitions and advanced selectors, you can fix both problems.

Use scale_transition_begin.html in the ch20 folder as your starting point. The finished version is in scale_
transition_end.html.

The styles in both pages have been split into two sections. The first section contains the browser-specific
prefixes needed for older browsers. The second section contains the standard transform properties. if you
need the browser-specific versions, uncomment the first section. for brevity, the following instructions use
only the standard properties.

1. Rotate the two images by adding the transform property to the :first-child

and :last-child pseudo-classes and setting its value with the scale() function.
Rotate the first image 6° counterclockwise and the other image the same amount
clockwise like this:

.scaleimg:first-child {
transform-origin: left top;
transform: rotate(-6deg);
}
.scaleimg:last-child {
transform-origin: right top;
transform: rotate(6deg);
}

2. Add a transition to the scaleimg class using ease-in-out and a duration of one
second. There's no need to set any properties for the transition because it will apply
to all of them.
.scaleimg {
margin: 10px;
padding: 10px;
background-color: #FFF;
border: 1px solid #000;
transition: ease-in-out 1s;
}
3. save the page and test it in a browser that supports transforms and transitions. The

transition is smooth, but the left image remains tucked behind the other image when
scaled up, as shown in figure 20-20 . This is because the images overlap slightly as
a result of being rotated in their normal state. The scaled-up image is not rotated
because the transform property in the :hover pseudo-class is lower down the
styles and overrides the values in the :first-child and :last-child rules.