1

我有 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 不起作用。为什么？

4

2 回答 2

1

要transform在元素上使用，该元素必须具有某种块状显示，例如display: blockor display: inline-block。

这里最合适的修复是：

#transform {
    display: inline-block;
}

一切看起来都一样，除了你的信会被翻转。

于 2013-07-26T15:30:43.287 回答
1

您需要将显示值更改为block- 因为<span>默认情况下元素是内联的，并且该transform属性仅适用于可转换元素（块级和原子级内联元素）

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

http://jsfiddle.net/a7EXc/

于 2013-07-26T15:30:58.310 回答