Question

我有这个HTML字符：

<div class="rotate">&#62;&#62;</div>

我希望这个角色面朝下，例如。

我发现这个css，似乎无法正常工作。

.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

如何旋转？ jsfiddle

Answer 1

将webkit-transform: rotate(-90deg);替换为-webkit-transform: rotate(-90deg);您错过了错误-。

小提琴：https://jsfiddle.net/pzawLfgz/3/

Answer 2

.rotate{
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }

https://jsfiddle.net/pzawLfgz/2/

并注意到这一点：

重要的是经过特别想象的老浏览器版本CSS命令通常是最后一个。这就是浏览器始终提供最后识别的命令和广泛定义的命令比任何甚至可能略有不同的东西都要好实现。因此，请总是如下结构：来自特别是一般的

Answer 3

看看这个：https://jsfiddle.net/tnk14hz2/1/

我只是将 display 设置为 inline-block 并且它起作用了。为了弄清楚这一点，我只是查看了 FontAwesome Icons 使用的 display 配置。

.rotate{
  display: inline-block;
  -moz-transform: rotate(130deg);
}

旋转html特殊字符或文本

3 个答案: