css - 跨度内的跨度样式不起作用

Question

我有 HTML 代码:

<div>
    <span>e</span>
    <span id="transform">w</span>
    <span>q</span>
</div>

和一个 CSS:

#transform{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

字母“w”看起来是垂直翻转的。那是对的。但是当我用跨度包裹跨度时:

<div>
    <span>
        <span>e</span>
    </span>
    <span>
        <span id="transform">w</span>
    </span>
    <span>
        <span>q</span>
    </span>
</div>

而且字母看起来没有翻转，这意味着我的 css 不工作。为什么？

Answer 1

您需要将显示值更改为block - 作为 <span>默认情况下元素是内联的，transform属性仅适用于 transformable elements ( block 级和原子级内联元素)

#transform{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
     transform: rotate(180deg);
     display: block;
    }

http://jsfiddle.net/a7EXc/