How to rotate text 90 degrees inline

Question

How do I rotate text 90 degrees without using the style sheet? I have placed the following instruction in the header area of the page:

<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>

Then I placed the following around the paragraph in question.

<div id="rotate-text">
<p>My paragraph</p>
</div>

But its not working and hence my question.

Your css selector is wrong: it should be `div#rotate-text` and not `div.rotate-text`. `.` is for a class, `#` is for an id. — sjahan, Nov 13 '17 at 09:37

sjahan · Accepted Answer · 2019-12-04T11:44:01.933

18

Here is a small visual example:

#rotate-text {
   width: 25px;
   transform: rotate(90deg);
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

edited Dec 04 '19 at 11:44

answered Nov 13 '17 at 09:44

sjahan

5,720
3
19
42

should I wrap the header id information between as I have done? – Chris Gedge Nov 13 '17 at 10:04
Yes, just set the CSS block in your `` tag and that should work! – sjahan Nov 13 '17 at 10:05

Freestyle09 · Answer 2 · 2022-04-11T06:22:28.057

15

You can use css property writing-mode

writing-mode: vertical-rl

or

writing-mode: vertical-lr

Or using transform property: rotate

transform: rotate(90deg)

edited Apr 11 '22 at 06:22

answered Jan 29 '21 at 08:44

Freestyle09

4,894
8
52
83

1

ya, writing mode is what i wanted! I wanted to rotate the long headers in a table so they wouldn't take up as much space. – CpILL Mar 22 '22 at 00:48

Ehsan · Answer 3 · 2017-11-13T09:55:25.837

5

you use of id in html code, so you must use of # in css.

Change:

div.rotate-text {

To:

div#rotate-text {

div#rotate-text {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 100px;
  transform-origin: top left;
  margin: 50px;
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

edited Nov 13 '17 at 09:55

answered Nov 13 '17 at 09:43

Ehsan

12,655
3
25
44

score 4 · Answer 4 · answered Aug 25 '21 at 13:33

4

Writing mode is better for text content, with transform: rotate() the text container still stays with the horizontal dimensions.

writing-mode: vertical-rl; //Rotate -90deg
writing-mode: vertical-lr; //Rotate 90deg

answered Aug 25 '21 at 13:33

dvdmn

6,456
7
44
52

score 0 · Answer 5 · answered Feb 01 '23 at 11:28

0

to get the text reading from the bottom up, use this:

#rotate-text {
   writing-mode: vertical-lr;
   transform: scale(-1, -1);
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>

answered Feb 01 '23 at 11:28

Hokascha

1,709
1
23
41

How to rotate text 90 degrees inline

5 Answers5

Linked