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/ .