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

258

Figure 7-32: Elements rotated around points other than their centers.

Two notes: First, negative angles can be equivalent to positive angles. h us, 270deg is
equivalent to -90deg in the i nal positioning of the element, just as 0deg and 360deg are
the same. Second, you can specify angles greater than the apparent maximum value. If you
declare 540deg , the element's i nal rotation will look exactly the same as if you'd declared
180deg (as well as -180deg , 900deg , and so on). h e interim result may be dif erent if you
also apply transitions (see next section), but the i nal “resting” state will be equivalent.

Almost as simple as rotation is scaling, an example of which is depicted in Figure 7-33. As you
no doubt expect, this scales an element up or down in size, making it larger or smaller. You
can do this consistently along both axes, or to a dif erent degree along each axis.

.box1 { transform : scale(0.5) ;}
.box2 { transform : scale(0.75, 1.5) ;}