你可以使用

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

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

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

然后在目标元素上:

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

您可以使用CSS转换来实现这一点。水平翻转会像这样缩放div:

-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的缩放，就像这样:

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

演示:

Span{显示:inline-block;保证金:1 em;｝ .flip_H{转换:规模(- 1,1);颜色:红色;｝ .flip_V{转换:规模(1，-1);颜色:绿色;｝ <span class='flip_H'>演示文本&#9986 <span class='flip_V'>演示文本&#9986

-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年跨浏览器支持的最佳选项感兴趣，请参阅我以前的回答。

你可以试试box-reflect

box-reflect: 20px right;

参见CSS属性框-反射兼容性?欲知详情

<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度不起作用。