在Alex的答案中看到翻转的线索后，我发现我只能翻转背景而不是整个元素。谢谢alex的回答

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

参见这里的例子http://jsfiddle.net/qngrf/807/

你可以同时垂直和水平翻转

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

根据转换性质，你可以得到一个很酷的翻转

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

实际上它翻转了整个元素，而不仅仅是背景图像

片段

function flip(){ var myDiv = document.getElementById('myDiv'); if (myDiv.className == 'myFlipedDiv'){ myDiv.className = ''; }else{ myDiv.className = 'myFlipedDiv'; } } #myDiv{ display:inline-block; width:200px; height:20px; padding:90px; background-color:red; text-align:center; -webkit-transition:transform .4s ease-out 0ms; -moz-transition:transform .4s ease-out 0ms; -o-transition:transform .4s ease-out 0ms; transition:transform .4s ease-out 0ms; transition-property:transform; transition-duration:.4s; transition-timing-function:ease-out; transition-delay:0ms; } .myFlipedDiv{ -moz-transform:scaleX(-1) scaleY(-1); -o-transform:scaleX(-1) scaleY(-1); -webkit-transform:scaleX(-1) scaleY(-1); transform:scaleX(-1) scaleY(-1); } <div id="myDiv">Some content here</div> <button onclick="flip()">Click to flip</button>

在Alex的答案中看到翻转的线索后，我发现我只能翻转背景而不是整个元素。谢谢alex的回答

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

参见这里的例子http://jsfiddle.net/qngrf/807/

你可以用CSS水平翻转它…

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle。

如果你想垂直翻转…

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

源。

不管怎样，对于基于gecko的浏览器来说，由于隐私泄露，你不能把它设置为:被访问。参见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

根据w3schools的数据: http://www.w3schools.com/cssref/css3_pr_transform.asp

Internet Explorer 10、Firefox和Opera支持transform属性。 Internet Explorer 9支持另一个选项，-ms-transform属性(仅用于2D转换)。 Safari和Chrome支持另一种选项，-webkit-transform属性(3D和2D转换)。 Opera只支持2D变换。

这是一个2D转换，所以它应该可以在Chrome、Firefox、Opera、Safari和IE9+上使用供应商前缀。

其他答案使用:before来阻止它翻转内部内容。我在我的页脚上使用了这个(从我的页眉垂直镜像图像):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

所以你最终翻转了元素，然后再翻转它所有的子元素。也适用于嵌套元素。