将 CSS3 变换应用于字形

Question

我正在尝试将 CSS 转换应用于 :before 伪元素中的图标（字形）。

最终，我的目标是简单地 "flip" 带有 transform: scale(-1, 1) 的图标，但是我似乎无法进行 any 转换以继续工作:before 伪元素中的字形。

这是一个简单的例子：

<!DOCTYPE html>
<html>
    <style>
        .icon 
        { }

        .icon::before {
            content: "X";
            color: white;
            font-size: 11pt;

            transform: scale(5);
        }
    </style>

<body>

    <div style = "padding: 1em; background: black; width: 200px; height: 200px">
        <div class = "icon">

        </div>
    </div>

</body>
</html>

小提琴链接：http://jsfiddle.net/729yspsp/1/

在这个例子中，为了演示，我使用了一个简单的 X 字符而不是实际的字形。

如您所见，未对字形应用任何变换。

那么我做错了什么？

注意：我使用的是 Chrome 的现代版本 (Chrome 37)，所以这不是浏览器不兼容问题。

Answer 1

CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

因此，transform 属性对严格的内联级元素没有影响。

伪元素默认为inline

您可以将 display 设置为 inline-block¹ 或 block，它将按预期工作。

Updated Example

.icon::before {
    content: "X";
    display: inline-block;
    transform: scale(5, 2);
    -webkit-transform: scale(5, 2);
    -moz-transform: scale(5, 2);
}

¹ 从而使它成为 atomic inline-level box.

将 CSS3 变换应用于字形

Applying CSS3 transforms to a glyph

html

css