css - 我想垂直翻转一个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/。