Chapter 2
CSS3 Transforms and Transitions
While CSS Animations can be used to alter almost every aspect of an HTML element (with the exception of the
properties listed in the previous chapter), some of the most powerful means of manipulating the presentation of
web pages lie in the CSS Transforms and Transitions modules, which are entirely new in CSS3.
CSS Transitions are the very simplest form of animation: a movement between two states. Once you master
the fundamental syntax for transitions described in this chapter, you will be able to apply simple, effective
animations to images (described in Chapter 3) and user interface elements (described in Chapter 4), and then
begin to create more complex keyframed animations (described in Chapter 5 and beyond).
CSS Transforms
There are four main CSS translation functions: translate, rotate, scale, and skew. The functions are combined
in the matrix transformation function. You’ll apply these transformations to a standard web page layout of an
image floated next to a paragraph of text as shown in Listing 2-1.
Listing 2-1. HTML5 Code for a Floated Image
<!DOCTYPE html>
< img src = "dudley-storey-statuette.jpg" alt = "Student-made statuette of Dudley Storey"
style = "width: 300px; height: 300px; float: left; margin: 0 2em 1.4em 0;" > Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis
in auctor semper, pharetra quis mi...
The code shown in Listing 2-1 will produce the layout shown in Figure 2-1.