Help get this topic noticed by sharing it on Twitter, Facebook, or email.
sarahkim (Official Rep) July 11, 2014 18:08

How to rotate an image with CSS

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:

img+img {

-webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

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

}



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:

Degree rotation: 0
BasicImage filter value: 0

Degree rotation: 90
BasicImage filter value: 1

Degree rotation: 180
BasicImage filter value: 2

Degree rotation: 270
BasicImage filter value: 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.
1 person likes
this idea
+1
This topic is not open for comments or replies.