How to rotate an image with CSS

If you want to rotate images, first set the img element to display as a block-level element:

img {

 display: block;

float: left;

margin: 20px;

}

Then use a set of proprietary CSS properties for Safari, Firefox, and Internet Explorer browsers to rotate the images 270 degrees, as shown in Figure 4.17:

img+img {

 -webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Figure 4.17. The first image rendered by default, but the rest of the images are rotated

Web designers rotate block-level elements through the use of proprietary CSS properties, but only in 90-degree increments.

Although the Safari and Firefox proprietary transform properties allow for a fine degree of rotating of elements (e.g., 78 degrees), Microsoft’s BasicImage filter property can rotate in only four stops, as shown in Table 4.2.