跨浏览器的方式来翻转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>
