使用CSS水平翻转字母

Question

我知道如何使用transform: rotate();来垂直翻转单个字母，但不知道如何水平翻转。

您知道如何水平翻转吗？

我想在我的标志中使用选择器.logo:first-letter {}。

<a href="#" class="logo">RR</a>

编辑: http://jsfiddle.net/n7YA7/1/

由于我正在使用一种来自谷歌的字体，不支持使用“Я”。

- Robert Richter

---

一样的情况。Matt Bryant 给我的代码可以工作，但是不能处理首字母。 - Robert Richter

Answer 1

将 scaleX 属性设置为变换。

.logo:first-letter {
     transform: scaleX(-1);
 }

如果始终是一个特定的字母，最好使用Unicode进行转换。在你的情况下，CYRILLIC CAPITAL LETTER YA（Я）是可用的。

- Matt Bryant

---

谢谢您的快速回答。我明白了您的意思。问题是我正在使用@font-face和来自谷歌的另一种字体。这种字体不支持这个字母。这就是为什么我必须反射它的原因。 - Robert Richter

是的，我明白了。它需要是一个<a>标签吗？如果您使用<span>标签并设置onclick属性呢？ - Matt Bryant

我有点困惑。无论我使用什么元素或选择器，它都不起作用。 :O - Robert Richter

@RobertRichter说过，就像我之前评论中所说的（我已经删除了），::first-letter只适用于默认为inline-block或block的元素 - 使用<p>可以使其生效：http://jsfiddle.net/n7YA7/3/。 - Adrift

Answer 2

我会使用比例尺：

transform:scale(-1, 1);
-ms-transform:scale(-1, 1); /* IE 9 */
-webkit-transform:scale(-1, 1); /* Safari and Chrome */

如果您想确认是否正确，请点击此处：http://jsfiddle.net/kytXf/

- gen