跨浏览器的方式来翻转HTML /图像通过JavaScript / CSS?

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

像这样翻转图像:

AABBCC CCBBAA AABBCC -> CCBBAA 

我不是在寻找animation ,只是翻转图像。

我已经search到没有avial,只发现了一个复杂的版本,利用MozillaZine上的SVG,我不确定它会跨浏览器工作。

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

看看其中的一个reflection.jstypes库,它们非常简单。 在IE中,他们将采用和使用“翻转”filter,还有一个“翻转”filter。 在其他浏览器内部,它将创build一个canvas标签并使用drawImage。 虽然以利亚的回答可能支持相同的浏览器。

试图解决一个错误时,只是挖出这个答案,而build议的答案是正确的我已经发现,它打破了大多数现代CSS Linting规则包含所有供应商规则的变换。 但是,包含-ms-tranform规则会导致IE9中的一个奇怪的错误,它应用了filter和-ms-transform规则,导致图像翻转并再次翻转。

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

如果您只想翻转背景图片,则可以使用翻转的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>