Style of span inside span doesn't work

Question

I have HTML code:

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

and a CSS:

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

and the letter 'w' looks flipped vertically. That is correct. But when I wrap spans with spans:

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

And the letter doesn't look flipped, it means my css doesn't work. Why?

Answer 1

To use transform on an element, the element must have some sort of block-like display, such as display: block or display: inline-block .

The most appropriate fix here is:

#transform {
    display: inline-block;
}

Everything will look the same, except your letter will be flipped.

Answer 2

You need to change the display value to block - as a <span> element is inline by default and the transform property only applies to transformable elements (block-level and atomic-level inline elements)

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

http://jsfiddle.net/a7EXc/