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

要在元素上使用transform，元素必须具有某种类似于块的显示，例如display: block或display: inline-block。

这里最合适的解决方案是：

#transform {
    display: inline-block;
}

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

Answer 2

您需要将显示值更改为block - 因为<span>元素默认为内联，transform属性仅适用于transformable elements（块级和原子级内联元素）

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

http://jsfiddle.net/a7EXc/

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

2 个答案: