2D Transformations 139The default point of origin in the CSS transform property is the element’s
horizontal and vertical center. You can change this using the transform-origin
property:
E { transform-origin: value; }
The value for this property is either one or two length, percentage, or
keyword values. Lengths can be any accepted CSS unit (em, px, and so on).
The keywords are left, right, top, bottom, and center. If two values are sup-
plied, the first sets the horizontal point and the second sets the vertical; if
only one is supplied, that point sets the horizontal, with the vertical pre-
sumed to be center (or 50 percent).
So if you want to change the point of origin to the top-left corner, you
can use either of the following:
E { transform-origin: 0 0; }
E { transform-origin: left top; }
And if you want the point of origin to be the bottom-right corner, you
can use these values (let’s say the element has a height of 50px and a width
of 200px):
E { transform-origin: 200px 50px; }
E { transform-origin: 100% 100%; }
E { transform-origin: right bottom; }
Let me demonstrate the effects of changing the origin of transforma-
tion. This example shows three identical elements with the same transform
property applied to each but with a different transform-origin value:
h2 { transform: rotate(-10deg); }
h2.example-1 { transform-origin: left center; }
h2.example-2 { transform-origin: 100% 50%; }
You can see the effects on the three examples in Figure 12-4. The first
example uses the default values (center center), so the element rotates around
the absolute center. The second example uses values of left center, so the
element rotates around the vertical center of the left-hand side. And the third
example uses values of 100% 50%, so the element rotates around the vertical
center of the right-hand side.
Figure 12-4: Different transform-origin values on a rotated element