Html 仅使用 css 翻转/反转/镜像文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3433641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flipping/Inverting/Mirroring text using css only
提问by TiansHUo
I did some googling and here's my answer
我做了一些谷歌搜索，这是我的答案
.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);
}<!--[if IE]>
<style>
.mirror {
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
<![endif]-->
<div class="mirror">testing</div>The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.
这里唯一的问题是镜像的中心不是对象的中心，所以也许我们需要一些 javascript 来将对象移动到我们想要的地方。
回答by hitautodestruct
Your code is correct but there is an easier way to do this:
您的代码是正确的，但有一种更简单的方法可以做到这一点：
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 */
}
I think this solves your centered mirroring issue.
我认为这解决了您的中心镜像问题。
As noted you will have to set the element to use a display of block, inline-block etc.
如前所述，您必须将元素设置为使用块、内联块等的显示。
回答by Yehuda Schwartz
to mirror use transform: scaleX(-1);to flip use transform: scaleX(-1) rotate(180deg);
镜像使用transform: scaleX(-1);翻转使用transform: scaleX(-1) rotate(180deg);
