The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

142 Chapter 12

scale

You can make an element larger or smaller than the original by using scale

functions. As with the translate functions, each of the horizontal and verti-

cal values has a function, called scaleX() and scaleY(), respectively:

E { transform: scaleX(value) scaleY(value); }

The values for scaleX() and scaleY() are unitless numbers, which give a

size ratio. The default size is 1; twice the default is 2, half the default is 0.5,

and so on. You can also use negative numbers—I’ll explain the effect of

negative numbers shortly.

To double an element’s original size on both axes, you use:

E { transform: scaleX(2) scaleY(2); }

A shorthand function, scale(), is also available. Note, however, that

unlike the translate() shorthand function, if only one value is provided, the

other is presumed to be identical. Using the previous example, you could

opt instead for the shorthand:

E { transform: scale(2); }

I’ll demonstrate scale in action with a few examples. Here’s the code:

h2.transform-1 { transform: scale(0.5); }

h2.transform-2 { transform: scaleX(0.5); }

h2.transform-3 { transform: scale(1,-1); }

The results are shown in Figure 12-7. The first example has a scale

value of 0.5, so the transformed element is half the size of the original—

remember I specified only one value in the shorthand, so the other is pre-

sumed to be equal. In the second example, I used 0.5 as a value but this

time for the scaleX() function, meaning the transformed element is the

same height as the original but only half the width.

Figure 12-7: The effects of different values in the scale function

In the final example, I supplied two values to the scale() shorthand:

The first is 1 (one), which sets the horizontal size to be the same as the

original, but the second is –1 (negative one). Using a negative value has the

effect of flipping the element vertically, creating a “reflection” of the origi-

nal element at the same scale.