風格跨度內的跨度不工作

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/