Graphics Programs Reference
In-Depth Information
Figure 7-38: Two differently translated elements.
While you can declare a transform-origin in cases where you're just translating, it doesn't
matter all that much whether you do so. At er all, whether an element's center or top-let
corner is pushed 50 pixels to the right doesn't really matter. h e element will end up in the
same place either way. But that's only true if all you're doing is translating. If you do anything
else at the same time, like rotate or scale, then the origin will matter. (More on combining
transforms in a bit.)
h e last type of transformation, skewing, is slightly more complex, although the method of
declaring it is no more dii cult than you've seen so far. Skewing an element distorts its shape
along one or both axes (see Figure 7-39).
.box1 { transform : skew(23deg) ;}
.box2 { transform : skew(13deg,-45deg) ;}
If you provide only a single value for skew() , then there is only horizontal (X) skew, and no
vertical (Y) skew. As with translations and scaling, there are skewX() and skewY() values
for those times you want to explicitly skew along only one axis (see Figure 7-40).
.box1 { transform : skewX(-23deg) ;}
.box2 { transform : skewY(45deg) ;}
Search WWH ::

Custom Search