HTML and CSS Reference
In-Depth Information
FIGURE 5.5
Scaling the
example container—the
smaller version over the top is
the original; the larger version
behind is the scaled version.
SCALE, SCALEX, SCALEY
scale
allows you to grow your elements horizontally and vertically, in a similar
manner to
width
and
height
, except that it treats the element and its child content
as one static entity; text won't be reflowed and so on. In the transform-2dscale.html
file in the chapter5 code download folder, you'll find the following line:
transform: scale(1.25,1.1);
which produces the effect shown in
Figure 5.5
.
This line scales the example by 25% horizontally and 10% vertically.
scale
takes unitless values called
scale factors
, which indicate the amount to grow or
shrink by. So, 1.1 means “grow by 10%,” 1.25 means “grow by 25%,” 2 means “grow
by 100%,” and so on.
Yo u c a n a l s o u s e v a l u e s l e s s t h a n 1 t o s h r i n k t h e a ff e c t e d e l e m e n t : 0 .9 m e a n s
“shrink by 10%,” 0.4 means “shrink by 60%,” and so on. You can even use negative
values with
scale
, which invert the elements they are applied to; all the points
on the element will go down past 0 and take a position on the opposite side from
where they started.
In the previous example, two values are provided for scaling along the X and
Y axes. If you specify only one value, it will be applied to both dimensions, for
example:
transform: scale(1.25);
would scale the element by a factor of 1.25 horizontally and vertically.
