THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 259

When writing CSS yourself, it seems most convenient to just stick with scale() and i ll in
a 0 for the horizontal any time you want a purely vertical scaling. If you're programmatically
changing the scaling via DOM scripting, it might be easier to manipulate scaleX() and
scaleY() directly.
As with rotation, you can af ect the origin point for scaling. h is allows you, for example, to
cause an element to scale toward its top-let corners instead of shrink down toward its center
(see Figure 7-36).
.box1 { transform : scale(0.5) ; transform-origin : top left ;}
.box2 { transform : scale(1.5) ; transform-origin : 100% 100% ;}
261
Figure 7-36: Two scaled elements, each with a different scaling origin.
Similarly simple is translation. In this case, it isn't changing the language from one to another,
but “translating” a shape from one point to another, as in Figure 7-37. It's an of set by either
one or two length values.
.box1 { transform : translate(50px) ;}
.box2 { transform : translate(5em,10em) ;}