Adding 2D Transforms - CSS3 Foundations - page 201

Initial value: none | Inherited: No | Applies to: All elements with a display declaration relating to block, inline or
table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: IE 9+, Firefox 3.5+, Chrome 12+, Opera 10.5+, Safari 3.1+
The transform property allows you to manipulate the position, size, rotation, and skew of an element. When pre-
fixed, the property itself looks like this:
-webkit-transform
-moz-transform
-ms-transform
-o-transform
The values to be used with transform are all functions: translate() , translateX() , translateY() ,
scale() , scaleX() , scaleY() , rotate() , skewX() , and skewY() . They all affect an element in 2D. The
next chapter covers 3D functions to be used with the transform property.
translate(), translateX(), and translateY()
The translate functions allow you to move elements around on a web page. That capability may not seem very excit-
ing because you've already seen this happen lots with properties such as position , top , left , right , and
bottom , but translate() is an easier way to move elements around without affecting the rest of the document.
Ideally, you use translate functions when you want to animate the position of elements, creating movement.
Remember that “25% Off” banner image you fixed to the bottom of the Cool Shoes & Socks page in Chapter 9? I
mentioned that the image is square and has a transparent section, which may prevent users from interacting with ele-
ments below it. By using the transform property, you can make that banner without using an image and work
around that problem of the image taking up an area it doesn't need to.
1. In index.html, find the following HTML and delete it:
<img class=”banner-ad” src=”images/banner-25percent.png” alt=”25% Off All
Purchases” />
2. In its place, add the following:
<div class=”banner-ad”><span>25% Off</span>All Purchases</div>
3. Save index.html.
Now that you've replaced the image, add some CSS to make the <div> look like the image.
4. In styles.css, add the following declarations to the .banner-ad rule set below the existing declarations:
background: #00B0DC;
color: white;
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 1.1em;
font-weight: bold;
min-height: 50px;
width: 200px;