如何将文本内联旋转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>

但它不起作用，因此我提出了问题。

Answer 1

这里有一个小的可视化示例：

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

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

Answer 2

您可以使用css属性writing-mode

writing-mode: vertical-rl

或

writing-mode: vertical-lr

或者使用transform属性：旋转

transform: rotate(90deg)

Answer 3

您在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>

Answer 4

编写模式更适合文本内容，使用transform:rotate()，文本容器仍然保持水平维度。

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

Answer 5

要从下往上读取文本，请使用以下命令：

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

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