我想垂直翻转div，但不是内部的内容

Question

我正在使用-webkit-transform来翻转一个div，但问题是div中的文本也被翻转了......我该怎么做才能翻转div而不是文本？

这是我的HTML

<div>
    <ul>
        <li>Primer elemento</li>
        <li>Segundo elemento</li>
    </ul>
</div>​

这是我的CSS

div {
    background: lightblue;
    padding-left: 150px;
    -webkit-transform: scaleX(-1);  
    -moz-transform: scaleX(-1);
}

这是我的jsfiddle：http://jsfiddle.net/uTGXx/

Answer 1

将文本放在另一个也可以翻转的div中，如：

<div class="flipped">
    <div class="flipped">
    <ul>
        <li>Primer elemento</li>
        <li>Segundo elemento</li>
    </ul>
    </div>
</div>​

，其中

div.flipped {
    background: lightblue;
    padding-left: 150px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
}

请参阅http://jsfiddle.net/uTGXx/2/。