Question

我不能旋转©字符。我在做错什么吗？

.copy {
  font-size: 12px;
  font-family: Arial;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

<span class="copy">&copy; This is not working.</span>
<span class="copy">&amp; This is working.</span>

Answer 1

您应该使用此：

sideways

使字符按照水平放置，但整行顺时针旋转90°。

.copy {
  font-size: 12px;
  font-family: Arial;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  transform: rotate(180deg);
}

<span class="copy">&copy; This is not working.</span>
<span class="copy">&amp; This is working.</span>

编辑-您可以使用sideways-right，因为支持sideways的浏览器并不多-它们都可以为我工作

编辑2-

sideways-right

为兼容性目的而保留的横向别名。

但实际上大多数主流浏览器都支持这两种方式

Answer 2

您只能使用transform旋转文本，所有主流浏览器甚至旧版IE都支持。

.copy {
  font-family: sans-serif;
  display: inline-block;
  transform: rotate(-90deg) translate(-100%, 100%);
  transform-origin: left bottom;
}

<span class="copy">&copy; Hello World</span>

无法旋转版权（©）字符

2 个答案: