通过 Javascript/CSS 翻转 html/图像的跨浏览器方式？答案

【问题标题】：Cross-browser way to flip html/image via Javascript/CSS?通过 Javascript/CSS 翻转 html/图像的跨浏览器方式？
【发布时间】：2009-08-20 21:53:08
【问题描述】：

是否有翻转图像的库/简单方法？

像这样翻转图像：

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

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

【问题讨论】：

您是否有理由不能简单地拥有两个图像副本？
@Christopher W. Allen-Poole 。图片由用户提供，没有服务器端组件……只有一个带有 XML 数据文件的 HTML 作为后端……所以我只有 JS/CSS 来翻转它们……如果这可以自动化，除了编辑 XML 之外，教他们会少一件事……

标签： javascript css image-manipulation

【解决方案1】：

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

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

【讨论】：

请不要忘记-o-transform: scale(-1,0); 和-o-transform: scale(0,-1); dev.opera.com/articles/view/css3-transitions-and-2d-transforms
谢谢。我添加了 Opera 转换。
不需要-ms-filter: "FlipH" ?
@EliGrey 这（或类似的东西）是否也可以通过 Firefox 的 Scratchpad 工作？也就是说，我正在寻找一种轻量级的方式来编辑实时 HTML/CSS（不使用资源密集型 Firebug）。
谢谢。请注意（使用 Chrome）我还必须确保它不在内联元素上。使用 display:inline-block 为我修复了它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

只是在尝试修复错误时挖掘了这个答案，虽然建议的答案是正确的，但我发现它违反了大多数现代 CSS Linting 规则，即包含所有供应商规则以进行转换。但是，包含 -ms-transform 规则会在 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;
}

【讨论】：

【解决方案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>

【讨论】：