如何将文本内联旋转90度

Question

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

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

然后我在相关段落周围放置了以下内容。

class NativeInterface{
    public static native void access(Object obj);
}

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

Answer 1

这是一个小视觉示例：

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

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

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>

Answer 3

您可以使用 css 属性 writing-mode

writing-mode: vertical-rtl

或者在相反方向简单地变换旋转

transform: rotate(90deg)