Graphics Programs Reference
In-Depth Information
257
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