通过 Javascript/CSS 跨浏览器翻转 html/图像？

Question

有没有库/简单的方法来翻转图像？

像这样翻转图像：

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

我用谷歌搜索没有找到avial，只找到了一个在 MozillaZine 我不相信它能跨浏览器工作。

Answer 1

以下 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;
}

Answer 2

看一下众多 reflection.js 类型库之一，它们非常简单。在 IE 中，他们将采用“flipv”过滤器，也有一个“fliph”过滤器。在其他浏览器中，它将创建一个canvas标签并使用drawImage。虽然 Elijah 的回答可能支持相同的浏览器。

Answer 3

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

这是我建议的改进，它也支持 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;
}

Answer 4

如果您只想翻转背景图像，则可以在翻转的 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>