如何将文本内联旋转 90 度

Question

如何在不使用样式表的情况下将文本旋转 90 度？我在页面的标题区域放置了以下指令：

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

然后我在有问题的段落周围放置了以下内容。

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

但它不工作，因此我的问题。

原文由 Chris Gedge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个小的视觉示例：

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

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

原文由 sjahan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您在 html 代码中使用 id ，所以您必须在 css 中使用 # 。

改变：

 div.rotate-text {

至：

 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>

原文由 Ehsan 发布，翻译遵循 CC BY-SA 3.0 许可协议