2D Transforms and Transitions - Beginning CSS3 - page 439

in the example in rotate_5.html, the heading is rotated and moved like this:
transform: rotate(-.25turn) translateY(215px);
The rotate() function not only flips the heading a quarter turn counterclockwise, but it also flips all
coordinates associated with the heading by the same amount. As a result, the heading's Y axis is flipped
90° counterclockwise. so, when translateY() is applied, the heading moves 215px to the right rather than
down (see figure 20-8 ). Although this appears counterintuitive, it's actually moving along the Y axis in the
local coordinate system. To move the heading down the page after rotating it, you need to use translateX()
instead like this (the code is in rotate_6.html):
transform: rotate(-.25turn) translateX(-215px) ;
The length is negative because the heading needs to move 215px to the left along the X axis in the local
coordinate system.
Deciding whether to move an element before rotating it is a matter of choice. Just remember that once an
element has been rotated, its X and Y axes have also changed.
Scaling Elements
To scale an element, use the transform property and set its value with the scaleX() , scaleY() , or scale()
functions. The first two functions take a number as their sole argument, and use it as a scaling factor for the X or
Y axis, respectively. For example, scale_1.html contains three identical headings in a large bold font. The first one
is rendered at its normal size, but the second one is scaled to half its normal width, and the third one to half its
normal height. By default, scaling is done from the center of an element, so transform-origin is set to left to
anchor the headings in their original position:
h1 {
font-family:"Arial Black", Gadget, sans-serif;
font-size:48px;
margin: 5px;
transform-origin: left;
}
#horizontal {
transform: scaleX(.5);
}
#vertical {
transform: scaleY(.5);
}
Figure 20-9 shows the result. The horizontally scaled text looks okay, but the vertically scaled text has
jagged edges.
Figure 20-9. Scaling text horizontally and vertically