The scale transform

Consider a horizontal list of three, subtly framed photos from a recent trip to Martha’s Vineyard, a small island off the coast of Massachusetts (FIG 4.01). This is a rather typical design pattern: a grid of linked images.

We’re going to rely once again on our trusty unordered list to mark these up:

<ul class="gallery">
  <li><a href="#"><img src="photo-1.jpg" /></a></li>
  <li><a href="#"><img src="photo-2.jpg" /></a></li>
  <li><a href="#"><img src="photo-3.jpg" /></a></li>
</ul>

With no style yet applied, FIGURE 4.02 shows how this list would appear by default. Notice how the images are quite a bit larger than we’d like them to be in the final design. This is intentional, as we’ll be using CSS to scale them down.