Chapter 3 ■ CSS3 tranSitionS for imageStransform-origin: bottom right;
transform: rotate(90deg);
}
figure.clapperboard:hover figcaption {
transform: rotate(0);
}
To make this an animated transition, add the following to the figure.clapperboard figcaption
declaration: transition: transform 2s cubic-bezier(.12,.49,.17,.87);.
(Note that you’re restricting the transition to tracking just the transformation by using the appropriate
property: this is both more efficient and makes it far easier to track the code when you return to it in six months
time... while avoiding unexpected transitions just because you’ve changed something else between the default
and rotated states of the caption).
While this works, there are still a few issues. For example, the text really isn’t clear enough to be read against
the spacesuit and the backdrop of the moon, so you’ll want to add some text-shadow and background to the
figcaption.
Listing 3-35. Improved Code for a Clapperboard Caption Transition
figure.clapperboard figcaption {
font-family: Futura, Arial, sans-serif;
font-weight: 100; font-style: italic; color: white;
font-size: 1.2rem; padding: 2rem; padding-top: 8rem;
box-sizing: border-box;
background: rgba(0,0,0,0.6);
text-shadow: 3px 3px 1px rgba(0,0,0,0.6);
transform-origin: bottom right;
transform: rotate(90deg);
transition: transform 2s cubic-bezier(.12,.49,.17,.87);
}
That’s a significant improvement to the legibility of the text, but the way the edge of the background comes
down still looks a little odd. There are a few possible solutions: one is to make the figcaption wider, pushing
the text to the right and the figcaption itself to the left, so that the box comes down in more of a visual “slicing”
effect (Listing 3-36).
Listing 3-36. Improved Code for a Clapperboard Caption Transition
figure.clapperboard figcaption {
width: 1236px; height:515px;
font-family: Futura, Arial, sans-serif;
font-weight: 100; font-style: italic; color: white;
font-size: 1.2rem; padding:
padding: 8rem 2 rem 0 660px;
box-sizing: border-box;
background: rgba(0,0,0,0.6);
text-shadow: 3px 3px 1px rgba(0,0,0,0.6);
transform-origin: bottom right;
transform: rotate(90deg);
left: -618px;
transition: transform 2s cubic-bezier(.12,.49,.17,.87);
}