Graphics Programs Reference
In-Depth Information
Figure 7-31: Rotated element boxes. The red dashes show the original placement of the elements before their rotation.
In a sense, transforming is a lot like relative positioning: h e element is placed normally and
then transformed. You can transform any element at all, and in the case of rotation can use
any real-number amount of degrees, radians, or grads to specify the angle of rotation. If
you've ever wanted to rotate your blog by e radians or 225 grads, well, now's your chance.
As you no doubt noticed, the boxes in the preceding example were rotated around their
centers. h at's because the default transformation origin is 50% 50% , or the center of the
element. You can change the origin point using transform-origin (see Figure 7-32).
.box1 { transform : rotate(33.3deg) ; transform-origin : bottom left ;}
.box2 { transform : rotate(-90deg) ; transform-origin : 75% 0 ;}
Search WWH ::

Custom Search