How to rotate text 90 degrees inline

问题

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.

回答1:

Here is a small visual example:

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

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

回答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>

来源：https://stackoverflow.com/questions/47261100/how-to-rotate-text-90-degrees-inline