As a quick digest of this article by Jonathan. You can literally rotate any HTML element by a certain degree with CSS, be it text or image or something else. After testing across a few modern browsers, the only one that’s not supporting this rotation technique is Opera.
The CSS rules you need for a rotation of 90 degrees:
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);That’s it.
In Opera 10.50 (currently in alpha at this point), you can do the same thing:
-o-transform: rotate(-90deg);
BTW I am always tempted to put in the non-prefixed version, just in case one browser supports the CSS3 attribute without requiring the prefix. More on Opera’s support for CSS3 transitions can be found here:
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
Thanks for the tip, Andre!
Hi, I tried this way…its working but its rotating it horizontally, how to rotate it vertically?
Changing the degree values?
Works great in IE and Firefox, amazing! Thanks, tire of rotating the same image 4 times for rounded corners.
will it pass css validation?
thanks for give this useful information
Very cool. Thanks for the info. Looking forward to CSS3 and HTML5.
Pingback: CSS Exercise, Part Two (Due May 4). « GD 220 / Spring 2010
No, the Filter property will not validate… but then again, neither will WebKit or Mozilla properties…
Validation is for suckers.
I Really Thanks for this Wabsite for my Usefull Informatuion.
After using these properties, image quality goes off.
Don’t know what to do
Also image is not aligned properly. after using these properties. please help.
Thanks in advance
Can this be used to rotate a video feed. I have a web cam pointing down a room and need to rotate the image to make it view best on my web page.
Does this work with ie 6 and 7
Who the hell cares if it works on IE6? maybe you still use some computer with Norton Commander as basic OS?
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);/* For Opera*/
-khtml-transform: rotate(-90deg);/* For Lunix*/
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Can you provide me the complete CSS code. and how it can be inserted to the html.Thanks
Thanks it is really helpful stuff!!
Works terribly wrong inside tables. The cellwidth is equal to the length (now height!) of the text. So this can’t be used for vertical table headers…
I tried to use the I.E. version to rotate a copy of an image under the original like a reflection and its not working. Here is the code
.rotate{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
I also tried:
.rotate{
-ms-filter: “progid:DXImageTransform.Microsoft.BasicImage(rotation=3)”;
}
for I.E. 8 without success.
Update: I had more than one filter in the css class which caused the rotation to not work. After I combine the two filters the rotation worked. My fault…
-ms-filter: “progid:DXImageTransform.Microsoft.BasicImage(rotation=2) progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) alpha(opacity=60);
FYI the rotation works great,
thank you.
“Who the hell cares if it works on IE6?”
People that realize that about 20% of their IE users still use it…
I, for one, questiont the wisdom of giving about 7-10% of your total users a bad experience just because you don’t feel like supporting a browser you personally feel is antiquated.
I can get the transform to work, but it appears to run down the middle of my screen. How do I get it to appear along the left edge of the screen? Like 5px from the left and 100px from the top, etc.?
Where to hell are you menna put this massive link??
Hi!
I think you should mention, that there needs to be a definition in the stylesheet:
position:absolute;
( -: roland :- )
This tool did all the thinking for me…
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
blog01
If you apply this filter as a class to a table, it will rotate the table on the webpage, but it will not print – whatever uses this class will be blank on the printed page. I’d be interested in knowing if there was a way to rotate something and print it correctly, not just rotate it on the page/browser/screen.
I tried using this rotate on a span class and it worked, but the text inside the span also rotate, while i wanted only the image to rotate. SO i used the rotate again on the text (180+180 = 360).
This worked fine, but the margin’s for the text got messed up.
Have a look at the green buttons here to see what i mean:
http://www.cc.gatech.edu/~tchakrav/JSexperiments/index.php
Pingback: Bild drehen und Verlauf erstellen - XHTMLforum
I always struggle to remember little things like this. Check out http://www.cssrotate.com for a CSS Rotation generator.
What if I want to rotate it by 30 or 45 degree?
Tried it with firefox and other browser, but can’t find a way for IE… because we can only apply 1,2,3 and 4 in the IE code… (even tried by 3.5… he he he)
ANY suggestions???
I never quite understand why browsers do a prefixed version of the various CSS codes, really makes it difficult to keep up. I find that copy and paste rule generator websites for a variety of CSS3 operators are really useful – Cuts out the need to remember the specifics. In particular for CSS transform / rotation I quite like using http://www.cssrotate.com
The IE doesn’t work for me. I don’t know why! I’ll try using different computer with different IE versions.
Is it possible to rotate the content/object using a function__ maybe a picture rotating if a certain click is made— and save the image/object on the database as it is rotated?
None of these variants seem to be working in latest version of Opera 11.64 build 1403
i hav tried ur methode but it not working man what to do ha …….
thank you for the tip, it was very helpful. i was able to accomplish the task without using any external lib’s.