Text Rotation
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:
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.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
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.
Opps, I meant to add my comment up here… but it’s way at the bottom. Essentially, I suggested using CSS3Please.
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.
“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
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?
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
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.
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);
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 -90 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:
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.
CSS Rotate Text
The CSS rotate() function can be used to rotate text in either a clockwise or counterclockwise direction. This function not only turns text but also rotates HTML elements. These functions are different types.
Web development, programming languages, Software testing & others
- rotate3d(x,y,z,angleValue)
- rotateX(angleValue)
- rotateY(angleValue)
- rotateZ(angleValue)
Real-Time Example: Text may need to be presented in a perfectly vertical direction in some situations, while in others, an angled presentation may be necessary. This we can do by using a rotate function.
How does Rotate Text work?
Rotate text can be worked on by using the rotate() function. Each function has the sub-functions they are given below.
1. rotate3d(x,y,z,angleValue)
It will rotate the text in x, y, and z directions with some angle.
2. rotateX(angleValue)
It will rotate the text in the x-direction with some angle.
3. rotateY(angleValue)
It will rotate the text in the y-direction with some angle.
4. rotateZ(angleValue)
It will rotate the text in the z-direction with some angle.
Examples
Below are the examples mentioned:
1. Rotate() function
.rotate1 < width: 180px; height: 400px; margin: 0 0 0 200px; font-size: 18px; color: brown; background-color: lightgray; transform: rotate(90deg); >.rotate2 < width: 180px; height: 400px; font-size: 18px; margin: 0 0 0 200px; color: brown; background-color: lightgray; transform: rotate(-90deg); >h2 < color: blue; >h1 Introduction of rotate function demo
Rotate text clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue)
Rotate text anti clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue) 
2. RotateZ() function
.rotate1 < width: 180px; height: 400px; margin: 0 0 0 200px; font-size: 18px; color: red; background-color: lightblue; transform: rotateZ(45deg); >.rotate2 < width: 180px; height: 400px; font-size: 18px; margin: 0 0 0 200px; color: red; background-color: lightblue; transform: rotateZ(-45deg); >h2 < color: orange; >h1 Introduction of rotate function demo
Rotate text clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue)
Rotate text anti clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue) 
3. RotateZ() function
.rotate1 < width: 180px; height: 400px; margin: 0 0 0 200px; font-size: 18px; color: navy; background-color: lightgreen; transform: rotateZ(180deg); >.rotate2 < width: 180px; height: 400px; font-size: 18px; margin: 0 0 0 200px; color: navy; background-color: lightgreen; transform: rotateZ(-180deg); >h2 < color: red; >h1 Introduction of rotate function demo
Rotate text clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue)
Rotate text anti clock wise direction:
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types. rotate(): rotate3d(x,y,z,angleValue) rotateX(angleValue) rotateY(angleValue) rotateZ(angleValue) 
Conclusion
You can rotate text using the rotate() function in CSS. We can rotate the text in a clockwise and anti-clockwise direction. The rotate function can also rotate HTML elements.
Recommended Articles
We hope that this EDUCBA information on “CSS Rotate Text” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5