HTML and CSS Reference
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_
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.
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:
transform-origin: left top;
transform-origin: right top;
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.
border: 1px solid #000;
transition: ease-in-out 1s;
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.