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

Is there a library/simple way to flip an image?

是否有一个库/简单的方法来翻转图像?

Flip image like this:

翻转的形象是这样的:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

I'm not looking for animations, just flip the image.

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

I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.

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

4 个解决方案

#1

191

The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.

下面的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;
}

#2

Take a look at one of the many reflection.js type libraries, They are pretty simple. In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too. Inside of other browsers, it will create a canvas tag and use the drawImage. Although Elijah's answer probably supports the same browsers.

看看其中的一个反射。js类型的库，非常简单。在IE中，他们会使用“flipv”过滤器，也有“fliph”过滤器。在其他浏览器中，它将创建一个canvas标记并使用drawImage。尽管Elijah的回答可能支持相同的浏览器。

#3

Just dug up this answer while trying to fix a bug, while the suggested answer is correct I have found that it breaks most modern CSS Linting rules regarding the inclusion of all vendor rules for the transform. However, including the -ms-tranform rule causes an odd bug in IE9 where it applies the filter and -ms-transform rules causing an image to flip and flip back again.

当我试图修复一个bug时，我找到了这个答案，虽然建议的答案是正确的，但是我发现它违反了大多数关于包含所有供应商规则的最新CSS Linting规则。但是，包括-ms-tranform规则会在IE9中引起一个奇怪的错误，它在其中应用过滤器和-ms-transform规则，导致图像再次翻转和翻转。

Here is my suggested improvement which also supports CSS Lint rules:

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

-3

If you only want to flip a background image you can use the class on the internal elements inside a flipped div. Basically you're flipping the internal elements with the main div, but flipping each of them back. Works in Firefox anyway.

如果你只想要翻转背景图像，你可以在翻转div中的内部元素上使用这个类。在Firefox。

Like this:

是这样的:

<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>

#1

191