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 が機能していないことを意味します。なんで？