Adding 2D Transforms - CSS3 Foundations - page 207

Figure 12-8 The banner advertisement goes crooked when text is resized.
You can fix this problem by changing the origin of the banner:
1. In styles.css, add the following declaration to the .banner-ad rule set:
-webkit-transform-origin: 50% 100%;
2. Modify the transform declaration, as follows:
-webkit-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);
3. Save styles.css.
As shown in Figure 12-9, the origin is still placed on the center of the X axis but at the bottom of the Y axis. The
translate() value for the X axis is 75px = 100 px (half of the banner's width) - 25px (to place the X origin
25px inside the viewport), and the Y axis is -25px to also place it 25 px inside the viewport. Because the banner
has a specified width of 200px , the X origin is always a constant, and now that the origin on the Y axis is changed
to the bottom of the element, it too is a constant, allowing the banner to grow as tall as it needs and always remain
anchored 25px inside the viewport.
Figure 12-9 The origin of the banner element now placed on the center of the X axis and the bottom of the Y axis.
Summary
In this chapter, you scratched the surface of 2D transforms. Making the banner advertisement out of text and CSS in-
stead of an image doesn't prevent users from interacting with elements below it like the image did. Although not all