If what you are looking for is a way to set type vertically, you’re best bet is probably CSS writing-mode.
If you’re just trying to turn some text, you can rotate entire elements like this, which rotates it 90 degrees counterclockwise:
.rotate {
transform: rotate(-90deg);
/* Legacy vendor prefixes that you probably don't need... */
/* 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 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.
See the Pen
Sideways Headers by Chris Coyier (@chriscoyier)
on CodePen.
See the Pen
Sideways Header Rotation by Graham Clark (@Cheesetoast)
on CodePen.
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!
Opps, I meant to add my comment up here… but it’s way at the bottom. Essentially, I suggested using CSS3Please.
Yes you can. To get 10 deg rotation you just use 10*1/90 which would be approx 0.11
how to rotate 45deg?
I believe is not a big problem for smart browser you can use CSS3 rotate, but for retarded browser you have to use
5 degree
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99, M12=-0.08, M21=0.08, M22=0.99, SizingMethod="auto expand");
m11 = sin (5 * pi / 180)
m12 = cos (5 * pi / 180)
m21 = cos (5 * pi/ 180)
m22 = sin (5 * pi / 180)
for IE sample, you can check fiddle here
http://jsfiddle.net/pv8sH/
Hello, Sean Hood, to answer your question, no. You can’t. However, you can rotate something in IE by, say, 7 degrees. That is MUCH more reasonable.
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.”
https://github.com/pbakaus/transformie
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
I try to use Text Rotation for my example page http://www.pcservices-au.com/accordion_effect.htm . The text can rotate perfecto but I have one problem the text keep wrap to another lines. I can’t find the solution. Anyone has any ideas I really appreciate. U can check the link and will see my problems.
Try using:
white-space:nowrap;Thanks a lot Why CSS (Michael Fokken). It works perfect.
but is does not supports in Internet Explorer (All version)
Its great that these CSS3 properties are finally making some headway, in terms of browser support, even IE’s catching up which is great!
If like a lot of devs you find it hard to remember every little detail (e.g. all the daft prefixed versions for each browser) when it comes to the new CSS3 operators then it might be useful to use one of the CSS generators available on the net. For transform, I quite often check out http://www.cssrotate.com
Chris, Your “filter: progid: …” destroys IE9 SP1 up-to-date
symptom: (have not tested Apple … yet) win7-64, a few of many details:
no prob previewing rotation from Xweb4 preview until open html file from explorer
then rotated text (in our case one small word) is displayed as coded in css 10px “word”
but css rotated tag is a big black box filling 80% of browser window
reinstall IE and Xweb and problem tripped by explorer is not going away
explorer permanently corrupts windows, preview, favs etc same gross corruption
remove “filter: progid: …” and corruption gone, but initial non-corrupt display? residue?
that requires a closer look — hope no issue for you, but this page is now famous – lol
Symantec and I are both going to keyhole this one with the win-ie dev teams
in about 6 hours, css-tricks.com/snippets/css/text-rotation /will advise /mark ~tx
ps don’t suppose dev or research will offer a safe alt? ;o(
I tried the code on my site, it doesn’t work in IE 9, when I view from my local it looks fine but when I upload it online, it doesn’t display as what I see in local.
Do you know what’s the problem ?
late comment but try adding this in front of “filter: …”
[if lte IE 8] so that your css line looks like:
[if lte IE 8] filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
nice!! Thank you :)
Is there a way to get the angle by which the element is rotated? Would prefer a way using jquery.
Example:
For the above code, I would like to do something like:
var angle = $(".rotate").getRotateAngle(); console.log(angle); // Should print -90See: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
I think the easiest way to figure out the css for rotated text is to use CSS3Please… it even provides the IE matrix filter so you don’t have to calculate it yourself. Here’s an example:
It is not working when i tried it for IE7 &8, any help?
Hello to all,
I make ebooks and I tried a rotation of a bloc with background and text inside (iBooks takes some css3). It works fine except (it’s a shame for a book !) that the text shakes, just like if it was follwing a wave… Can someone help ?
Here is my css code:
{
.encadregris_turn{
font-family: “HelveticaNeue-Italic”, sans-serif;
font-size: 0.9em;
padding: 0.8em;
color: #624a30;
float: right;
width: 55%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-epub-transform: rotate(2deg);
margin-top: 1.2em;
}
What’s the difference between “IE” and “Internet Explorer” in this example?
If I can omit one, I’d really like to, seeing as how IE6 is now dead.
Any idea how to insert this in single HTML tag?
It seems using both the -ms prefix and the filter-attribute will double the effect (rotating the double amont) in IE9 (for me at least). Leaving out the -ms prefixed line fixes this for me, and the filter-thing works fine in IE9 also.
This is a very good example. Thanks
I’ve noticed that with IE in print mode the text is not rendered as rotated.
Is there any fix for this?
Problem I’m having is with the IE rotate. This rotates the text but “Microsoft.BasicImage”converts it to and image, breaking the link.
This is an easy and useful tool to convert CSS3’s transform
to IE filters: http://www.useragentman.com/IETransformsTranslator/
The code works very well. But when the text is long, without spaces, it goes outside the border of the cell!! How to prevent this? How to resize the cells according to the content?
Anyone knows if it’s possible to rotate (180 deg) in epub, working with Adobe Digital Editions? Thanks.
thankyou for ur sharing^^
Can I rotate just one character? I am using an arrow pointed straight up in text (↑), but would like to show it angled at 45-degrees, if it’s possible. Thanks so much for any help!
:)
Just throw a span around the character you want to rotate and add the .rotate class to the span. If you can’t add the span because you don’t have access to the html for some reason you could use something like Dave Rupert’s Lettering.js
Worked great thanks!
Great article! It looks like the IE transform is no longer needed for newer versions of IE and the -o prefix may not be needed for newer versions of Opera as well.
please suggest for 45 degree rotation for IE -7,8
PLEASE stop marking some things “IE compatible” and other as “Internet Explorer compatible” in order to count them as 2 different things.
Ugh.
Can IE please just die already!? or work entirely of webkit? Seriously, I don’t even want to bother coding for all the bugs in IE.
Does anyone know of a fix that allows filters to render when printing to PDF? IE renders the rotation just fine, but if i use IE8 or IE7, the filter property will not render correctly in the PDF print. Thanks
Thanks! But for some reason in IE9 the text has rotated 180 degrees and has a black background:
http://monosnap.com/image/GNYC0ztxiHW1y5LzfohBgowZUA5lGu
In IE8 and other browsers looks fine:
http://monosnap.com/image/cgV0mFulOBstulAvjtoBXvAeNJI8Ry
Any tips?
thanks
will this work on images also ?
Can you confirm the compatibility? i.e. since which version these all rotation css supports/ supported.
I believe the post is quite outdated and is for earlier release of transform in css3.
Any idea about the Adobe digital edition and IPAD to support css for rotated text.
https://css-tricks.com/sideways-headers/
The rotation is not working in IE8. Can you please let me know what is the issue ?
Just a suggestion… but what if you set the rotation from the beginning by yourself (to 0)… then when you want to read/edit it, just use document.style.
Well now I know that i’m kinda late, but is there a way to rotate only part of a text like this in CSS ” .om-os-btn:after{
content: ” ᐳ”;
font-size: 12px;
transform: rotate(-90deg);
}”
I really do struggle finding the right symbol for it to work but then I tried this which didn’t work either…
You might consider using
writing-modeinstead if you’re going for vertical text. One idea is to wrap the text you want to rotate in a >span< then set thewriting-modetovertical-rl. You can still go thetransformroute — the only thing to remember is to set thetransforn-originas well to set the position of the rotation.