翻转/反转/仅使用CSS镜像文本

我做了一些Googlesearch，这是我的答案

<!--[if IE]> <style> .mirror { filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1); } </style> <![endif]--> <style> .mirror { display:block; -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform:matrix(-1, 0, 0, 1, 0, 0); } </style> <div class="mirror">testing</div> 

这里唯一的问题是镜像的中心不是对象的中心，所以也许我们需要一些JavaScript来移动我们想要的对象。

Answer 1

你的代码是正确的，但有一个更简单的方法来做到这一点：

 img.flip { -moz-transform: scaleX(-1); /* Gecko */ -o-transform: scaleX(-1); /* Opera */ -webkit-transform: scaleX(-1); /* Webkit */ transform: scaleX(-1); /* Standard */ filter: FlipH; /* IE 6/7/8 */ } 

我认为这解决了你的中心镜像问题。