真正的镜子:

.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'>镜像文本

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

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

然后在目标元素上:

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

你可以使用

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

你可以试试box-reflect

box-reflect: 20px right;

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

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

我们可以使用非常少的代码，使用css关键帧和它的alternate属性(尝试删除alternate来查看区别)制作非常酷的文本效果:

跨度{ 粗细:1000;字体大小:3.3 em; ｝ 小{ 显示:inline-block; 字体大小:2.3 em; 动画:1s无限交替冷却旋转 ｝ @keyframes coolrotate { 从{ 变换:scale(1,1) translate(-0.1em, 0) ｝ , { 变换:scale(- 1,1) translate(0,0) ｝ ｝ < span > < span > c > < /跨度 小> < o < /小> < span > o < / span > <小> L > < /小 < >小…小> < / < / span >