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

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

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

真正的镜子:

.mirror { 显示:inline-block; 字体大小:30 px; -webkit-transform:矩阵(-1,0,0,1,0,0); -moz-transform:矩阵(-1,0,0,1,0,0); -o-transform:矩阵(-1,0,0,1,0,0); 变换:矩阵(-1,0,0,1,0,0); ｝ <span class='mirror'>镜像文本

您可以使用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

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

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

然后在目标元素上:

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

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