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.

Answer 1

Here is a small visual example:

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

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

Answer 2

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>

Answer 3

You can use css property writing-mode

writing-mode: vertical-rl

or

writing-mode: vertical-lr

Or using transform property: rotate

transform: rotate(90deg)

Answer 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

Answer 5

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>