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

为了跨浏览器兼容，创建这个类

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

并将其添加到您的图标类，即。

<i class="icon-search mirror-icon"></i>

以获得左侧有手柄的搜索图标

-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属性框-反射兼容性?欲知详情

我在网上搜罗了包括

Stack Overflow回答， MSDN文章, http://css-tricks.com/almanac/properties/t/transform/, http://caniuse.com/搜索=变换, http://browserhacks.com/, http://www.useragentman.com/IETransformsTranslator/。

这个解决方案似乎适用于包括IE6+在内的所有浏览器，使用scale(-1,1)(适当的镜像)和适当的filter/-ms-filter属性(IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}