Pro CSS3 Animation

CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS

its original size. scale will transform the element equally in all directions. You can also apply scale to ordinal
directions: X (horizontal), Y (vertical), and Z (depth).

Flipping Images with scaleX

You can use the scale CSS transformation to effectively mirror HTML elements (usually images, although in
principle this technique could be applied to any element). If scale starts at 1 , as shown on the left side of the
diagram in Figure 2-5, the affected element will grow smaller as you lower the value of scale until you reach 0,
when the image disappears. If you push the value into negative territory, the image will begin to grow again, but
will appear flipped horizontally, as shown on the right side of Figure 2-5.

You can use scale to quickly flip an image on a page, rather than processing it through an application such
as Adobe PhotoShop to generate a new copy. Listing 2-5 shows how the transformation could be applied to
reverse an image of Abraham Lincoln.

Listing 2-5. Flipping an Image with an Inline Transform Style

Figure 2-6 shows the outcome of the code in Listing 2-5.

scaleX(1)

(original)

scaleX(-1)

(flipped)

scaleX(0.5) scaleX(-0.5)

scaleX(0)

Figure 2-5. Effect of using small and negative values of scaleX()

Figure 2-6. Original photograph of Abraham Lincoln (left) flipped using CSS3 scale transform (right)