通过 Javascript/CSS 跨浏览器翻转 html/image 的方法？

有没有一种简单的方法来翻转图像？

翻转图像如下:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

我不是在寻找动画 ，只是翻转图像。

我没有用谷歌搜索过禽鸟，只找到了一个复杂的版本，它在 MozillaZine上使用了 SVG，我不确定它是否能跨浏览器工作。

49670 次浏览
小开
最佳答案

下面的 CSS 将在 IE 和支持 CSS 转换的现代浏览器中工作。我包括了一个垂直翻转类，以防万一你也想用它。

.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
小开

看看众多 反射 Js类型库中的一个，它们非常简单。在 IE 中，他们会使用“ flipv”过滤器，也有一个“ flipv”过滤器。在其他浏览器内部，它将创建一个画布标记并使用 draImage。尽管 Elijah 的回答可能支持同样的浏览器。

小开

如果只想翻转背景图像，可以在翻转的 div 中的内部元素上使用该类。基本上就是用主 div 翻转内部元素，但是把每个元素都翻转回来。反正在 Firefox 中也能用。

像这样:

<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>
小开

刚刚挖出这个答案，而试图修复一个错误，而建议的答案是正确的，我发现它打破了大多数现代 CSS Linting 规则，包括所有供应商规则的转换。然而，在 IE9中包含-ms-change 规则会导致一个奇怪的错误，即它应用了过滤器和-ms-change 规则，从而导致图像再次翻转和再次翻转。

下面是我建议的改进，它也支持 CSS Lint 规则:

.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(1);  /* linting rule fix + IE9 fix */
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

提交答案