Html 反转在css中不起作用的文本

我需要将文本旋转90度。我遵循了包括stackoverflow在内的一些规则，但无法反转文本

我的css是：

.semiInverted {
    -moz-transform: rotate(90deg);
}

JsFiddle：

---

有人能帮我吗？

文本

不是有效的HTML标记。将

text

标记切换到

span

，它应该可以工作

CSS

.semiInverted {
    display: inline-block;
    transform-origin: bottom left;
    -moz-transform: rotate(90deg);
    transform:  rotate(90deg);
}

HTML

Inverted Text:<span class="semiInverted">&nbsp;&#8250;</span><br>
Normal Text:<span>&nbsp;&#8250;</span>

倒排文本：›

正常文本：›；

文本

不是有效的HTML标记。将

text

标记切换到

span

，它应该可以工作

CSS

.semiInverted {
    display: inline-block;
    transform-origin: bottom left;
    -moz-transform: rotate(90deg);
    transform:  rotate(90deg);
}

HTML

Inverted Text:<span class="semiInverted">&nbsp;&#8250;</span><br>
Normal Text:<span>&nbsp;&#8250;</span>

倒排文本：›

正常文本：›；

该元素应为块元素，否则无法旋转。此外，

不是有效的HTML标记；改用

或

。最后，您不应该只使用Mozilla特有的CSS属性（

-moz-…

）。正确的CSS应该是：

.semiInverted {
    display: inline-block;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

---

元素应为块元素，否则无法旋转。此外，

不是有效的HTML标记；改用

或

。最后，您不应该只使用Mozilla特有的CSS属性（

-moz-…

）。正确的CSS应该是：

.semiInverted {
    display: inline-block;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

您正在使用该属性的实验性、仅Firefox版本。摆脱

-moz-

您正在尝试设置HTML中不存在的

元素的样式。改用

div

或另一个

可转换元素是以下类别之一的元素：

• 一个 元素，其布局由CSS框模型控制，该模型为 块级或原子内联级元素，或其显示 属性计算为表行、表行组、表标题组， 表尾组、表单元格或表标题
• 元素 SVG名称空间，不受具有 属性变换、“模式变换”或渐变变换

您正在使用该属性的实验性、仅Firefox版本。摆脱

-moz-

您正在尝试设置HTML中不存在的

元素的样式。改用

div

或另一个

可转换元素是以下类别之一的元素：

• 一个 元素，其布局由CSS框模型控制，该模型为 块级或原子内联级元素，或其显示 属性计算为表行、表行组、表标题组， 表尾组、表单元格或表标题
• 元素 SVG名称空间，不受具有 属性转换、“模式变换”或“渐变变换”

---

如果你使用普通的HTML和css，效果很好（我试过使用段落）

---

如果使用普通HTML和css，效果很好（我尝试使用段落）

试试这样的方法

试试这样的

---

我想你要做的就是把元素变成一个内联块

---

我想你要做的就是把元素变成一个内联块

---

HTML

 <div >
        Inverted Text: <span class="semiInverted" >  &nbsp;&#8250;  </span>
     <br>
    Normal Text:<text>&nbsp;&#8250;</text>
         </div>

小提琴

---

HTML

 <div >
        Inverted Text: <span class="semiInverted" >  &nbsp;&#8250;  </span>
     <br>
    Normal Text:<text>&nbsp;&#8250;</text>
         </div>

小提琴

---

这个怎么样：

-webkit变换：旋转（90度）；-莫兹变换：旋转（90度）；-ms变换：旋转（90度）；-o变换：旋转（90度）；变换：旋转（90度）@Govan its用于确保每个知名浏览器（如Chrome、Firefox、Safari、Opera）都使用您的CSS3转换属性correctly@user2002495不工作。试一试小提琴。这个怎么样：
-webkit变换：旋转（90度）；-莫兹变换：旋转（90度）；-ms变换：旋转（90度）；-o变换：旋转（90度）；变换：旋转（90度）@Govan its用于确保每个知名浏览器（如Chrome、Firefox、Safari、Opera）都使用您的CSS3转换属性correctly@user2002495不工作。试试小提琴吧，它很好用。。我可以知道我的代码不工作的原因吗？它工作得很好。。我可以知道我的代码不工作的原因吗？为什么使用display:inline块。要不然它就不行了？@Govan，是的。该元素应为块级元素；否则它将无法旋转。您告诉过使用我们无法旋转，但@rajeshkakawat使用文本进行了旋转。@Govan它可能会工作，但
不是有效的HTML元素。这与使用标签的
相同。查看此列表以了解更多信息。为什么使用显示：内联块。要不然它就不行了？@Govan，是的。该元素应为块级元素；否则它将无法旋转。您告诉过使用我们无法旋转，但@rajeshkakawat使用文本进行了旋转。@Govan它可能会工作，但
不是有效的HTML元素。这与使用标签的
相同。请查看此列表以了解更多信息。