CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSThe code in Listing 2-4 will create the result shown in Figure 2-3; note that I’ve had to change the image’s
inline style slightly to provide it with more space for the margin on the right-hand side to compensate for the new
angle of the image.
transform-origin takes values the same way background-position and other properties that combine a
horizontal and vertical offset do. The values are specified as the horizontal position of the origin point followed
by the vertical position, relative to the element itself. The values can be specified as keywords (top, center,
bottom, left, and right), numerically, or as a combination of the two. They can also be outside the area of the
element itself (for example, to create a transformation origin axis above or below the element, as shown in the
“card fan” image gallery example in Chapter 3).
The Webkit CSS3 Transform Aliasing Issue
Early versions of Chrome and Safari (up to version 5.1) contain a rendering bug: when transforming some
elements, the browsers will not antialias the edges of rotated or skewed HTML content, resulting in so-called
“jaggies” or “staircasing” on the edges of images, as shown in Figure 2-4.
Figure 2-3. Rotated, floated image with paragraph text