Adding 2D Transforms - CSS3 Foundations - page 202

5. Below the .banner-ad rule set, add a new rule set:
.banner-ad span {
clear: both;
display: block;
font-size: 2.2em;
}
6. Save styles.css.
As shown in Figure 12-1, the banner advertisement image is replaced with text and CSS. At the moment, the
banner sits square on the page, but you can change that position using the transform property.
Figure 12-1 The banner advertisement now made using CSS rather than an image.
7. In the .banner-ad rule set, add the following declaration:
-webkit-transform: translate(50px, -25px);
8. Save styles.css.
The banner now sits partially off-screen, outside the viewport, as shown in Figure 12-2. This change is all part of the
master plan and puts the banner in a place where you can rotate it in a moment.
Figure 12-2 The banner advertisement moved 50px on the X axis and -25px on the Y axis.
By giving the translate() function two values (the X and Y positions), you tell the browser to move the banner
50px horizontally to the right and move it vertically upward 25px on the Y axis. Negative values on the X axis move
an element horizontally to the left and vertically upward on the Y axis.
Putting the banner in this position may seem strange, but it makes more sense when you consider the origin of the
element. Each element has an origin, which is the position used to calculate transforms. As shown in Figure 12-3, an
element's origin (represented by a cross) is its center by default, which you can change via the transform-ori-
gin property that is covered shortly.