CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
Using CSS techniques like this, you can adjust images on the fly instead of having to return to PhotoShop,
make the changes, then save and upload the file to the site, and without having to modify any
HTML code.
Translate
Like scale, the translate modifier might seem a bit redundant at first: it uses the same coordinate system (and
visually, produces the same result) as applying top, left, bottom, and right properties to a relatively positioned
element. However, as you will see, translate can make it easier to animate HTML content.
translate(x,y) moves the element in horizontal and vertical directions by using positive or negative values.
translateX() moves the element in the horizontal plane, while translateY() moves it vertically.
For example, if you wanted to move the statuette image shown in Figure 2-4 up 4em and to the right by 50px,
you’d use the code shown in Listing 2-6.
Listing 2-6. CSS Code for Translating an Image
img.tilt {
width: 300px; height: 300px; float: left;
-moz-transform: translate(50px, -4em); -o-transform: translate(50px, -4em);
-ms-transform: translate(50px, -4em); -webkit-transform: translate(50px, -4em);
transform: translate(50px, -4em);
}
Skew
Applying skew to an element “shears” it horizontally or vertically and can be useful for imparting an extra sense
of speed or motion to an element. Imagine taking the opposite sides of a rectangle (the top and bottom edges,
for example, or the left and right sides) and pulling them in different directions, while ensuring that they remain
parallel.
The values entered for skew refer to the angle that the other sides will be set to. For example, “leaning” an
image to the right is a skewX transformation. transform: skewX(21deg) will mean that the left and right edges of
the image will be set to 21 degrees from the vertical (see Listing 2-7). Leaning the image to the left still uses skewX,
but with a negative value: skewX(−21deg), for example, will set the same edges negative 21 degrees (that is, left)
from the vertical. skewY takes the left and right sides of an element’s box and shifts them up and down.
Listing 2-7. CSS Code for Skewing an Image
img.tilt {
width: 300px; height: 300px; float: left;
-moz-transform: skewX(21deg); -o-transform: skewX(21deg);
-ms-transform: skewX(21deg); -webkit-transform: skewX(21deg);
transform: skewX(21deg);
}
You can see the outcome of Listing 2-7 in Figure 2-7.