Rotate Images and Stuff wit CSS only

Rotate Images and Stuff wit CSS only
By Gregor Martynus / 2 Comments

If you're new here, you may want to subscribe to our RSS feed. Thanks for visiting!

Did you know you can rotate images (and all other html elements) by using nothing but CSS?

Simply add these CSS classes to your HTML elements for rotation in 90 degree steps.


.rot0 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
rotation: 0deg;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rot90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
rotation: 90deg;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
rotation: 180deg;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

You can also set the rotation origin for Firefox and Safari by using


.rotate-me {
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

Rotation for Internet Explorer works a little different as there is no rotation origin. The element is simply rotated and aligned with its new dimension, within the flow of the page.

Below is a proof for the concept of rotating an image and putting navigation tabs on the left site of the page. I’m sure there are plenty more useful things you could do, for example: rotating text to display the date of an artice.

Rotate-images-and-stuff-with-css

This example will work with gecko-based browsers like Safari and Safari Mobile on the iPhone, Firefox 3.5 and Internet Explorer 5.5 and higher.
« The Zen of Laptoplessness
Random Arithmetic Worksheets »
2 Comments

1.
datshay
Posted October 5, 2009 at 12:47 pm | Permalink

hay thanks a lot… But ie doesnt support it. Can u solve it too????
2.
Gregor
Posted October 5, 2009 at 1:22 pm | Permalink

Hey datshay, it works in IE, too. You see the image is rotated, just click on it to rotate it clockwise!

But something is wrong with the tabs in IE8. I’ve no time right now to dig deeper into that, but I fixed the example by telling IE 8 to use IE 7’s rendering engine. Have fun playing around with it & thanks for your Feedback!

note: Opera is not supported yet.