你可以使用

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

or

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

注意，将位置设置为绝对是非常重要的!如果你不设置它，你需要设置display: inline-block;

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

这两个参数是X轴和Y轴，-1将是一个镜像，但您可以根据需要缩放到任何大小。上下颠倒就是(-1，-1)

如果您对2011年跨浏览器支持的最佳选项感兴趣，请参阅我以前的回答。

只是增加了一个工作演示水平和垂直的镜子翻转。

.horizontal-flip { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .vertical-flip { -moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } <div class="horizontal-flip"> Hello, World <input type="text"> </div> <hr> <div class="vertical-flip"> Hello, World <input type="text"> </div>

<span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

只需要显示:内联块或块旋转。基本上第一个答案是好的。但是-180度不起作用。

这适用于's7 stroke icons'和'font-awesome'这样的字体图标:

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

然后在目标元素上:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>

你可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);