HTML and CSS Reference
When you are transforming an element, that element has a transform origin, which, by default, is 50% 50% (on both
the X and Y axes)—the center of the element.
As shown in Figure 12-7, the top element has the default origin of 50% 50% , which places the origin in the center
(represented by a cross). When you apply a rotate transform of 45 degrees, that element is rotated around its origin.
Figure 12-7 An element being rotated 45 degrees around an origin of 50% 50% and 100% 100%.
In Figure 12-7, the element at the bottom has an origin that is placed 100% on the X axis and 100% on the Y axis
(the bottom-right corner). When you rotate the element 45 degrees around this origin, the transformation creates a
Let's go back to the “25% Off” banner advertisement to make use of transform-origin .
Although the banner is in the desired position, as shown in Figure 12-8, when the text size is scaled in a browser
such as Firefox, the banner goes a bit crooked, and not all the text can be seen! This happens because the Y axis in
the translate() function is -25px , which is supposed to be half the height of the element. When text is resized,
the height of the element grows, and that -25px value may no longer be half the height of the banner, causing its
position to go off center.