Code Snippet
Text Rotation
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}The example above rotates text 90 degrees counterclockwise.
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
Also see this blog post about sideways headers.
Could i say rotate something in IE by say 5 or 10 degrees?
Yes, but you would have to use javascript in ie6.
This thread has a lot of info on it.
However, I use jQuery for this, as there is a very nice plugin.
In fact you don’t have to use javascript for this to work in IE, you could use IE’s matrix filter!
Great man, it will also work for Images, we can use for rounded corner images to rotate the one single image.
css rotation does not work in ie 7 or ie 7-
Thanks, this is just what I needed.
You did forget Opera: -o-transform:rotate(90deg);
It’s nice !.thank you very much !
“Transformie is a javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.”
http://transformie.com
Hey Opera should be on that list too… cheers!
-o-transform: rotate(-90deg);
I DIDN’T GET IT..
No way to rotate another angles rather than 90/180/270 in IE?
I have rotated the text and it is working with ie, but the text seem fuzzy and just doens’t look good. Is there a way to prevent that?
Try:
zoom:1;
background-color: your colour.
One big problem with this is the filter attribute is very inefficient. Say, animating the margin of an element with a filter, or has child elements with a filter, is incredibly jerky on the best of machines.
Ran into a problem with this recently and really need a faster way to rotate text for this project, perhaps cufon.
Hi Chris,
Could you explain how it should done for google chrome? I have chrome installed in my machine. It is not working with the above code.
Thanks.
Kenchappagoudra
@ SAM JARVIS
your answer did the trick for me … great stuff mate :)))
ngfnfggf
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.