Jump to content

How to rotate an image with CSS

0
  adfm's Photo
Posted Jan 19 2010 05:07 PM

Save yourself some time and use CSS to rotate an image for you. This common task is achievable if you follow this excerpt from Christoper Schmitt's CSS Cookbook, Third Edition.


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

Attached Image

Discussion

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.

Table 4.2. Simple conversion table for cross-browser rotation

Degree rotation

BasicImage filter value

0

0

90

1

180

2

270

3


Note

The Safari and Firefox transform properties also allow the benefit of skewing the rendering of block-level elements. However, at the time of this writing, the effect is not available in Internet Explorer 8. For more information on this effect, refer to the section of the previous recipe.

CSS Cookbook

Learn more about this topic from CSS Cookbook, 3rd Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

See what you'll learn


Tags:
0 Subscribe


0 Replies