CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
• Rotating the image by 180 degrees will not flip or mirror it; that can be achieved using
a hack of the scale transformation, discussed later in this chapter, or a 3D rotation,
discussed in Chapter 9.• You can rotate any HTML content you wish, but from a design perspective it is not
recommended that you rotate text: doing so reduces legibility and induces a painful crick
in the neck for your readers.• The unit of measurement needs to be present, even if the amount of rotation is 0. In most
CSS measurements, 0 is 0 for any unit, (i.e., width: 0 works as an alternative to width:
0px.) But when rotating to 0, you must specify transform: rotate(0deg); transform:
rotate(0) will not work.As you can see, inline styles for transformations can be lengthy due to the requirement to include vendor
prefixes. It is much more common to create transformations separately, as a class or id in an embedded or
linked stylesheet (see Listing 2-3).
Listing 2-3. An Embedded CSS Stylesheet for Transforming an Image
<!DOCTYPE html>
style = "margin: 0 2em 1.4em 0; class = "tilt" > Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat,
facilisis in auctor semper, pharetra quis mi...
To rotate the image as if it were pinned at its top-right corner, you must move the element’s
transform-origin to that location, as shown in Listing 2-4.
Listing 2-4. Rotating an Image from a Corner
img.tilt {
width: 300px; height: 300px; float: left;
-moz-transform-origin: right top;
-o-transform-origin: right top; -ms-transform-origin: right top;
-webkit-transform-origin: right top; transform-origin: right top;
-moz-transform: rotate(−10deg); -o-transform: rotate(−10deg);
-ms-transform: rotate(−10deg); -webkit-transform: rotate(−10deg);
transform: rotate(−10deg);
}