blocks|key|3307461|text|以下CSS将在IE和支持CSS转换的现代浏览器中工作。我包含了一个垂直翻转类，以防你也想用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3307462|.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;
}|code-block|syntax|javascript|3307463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>.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;
}
</code></pre>

blocks|key|3307549|text|看看众多reflection.js类型库中的一个，它们非常简单。在IE中，他们将使用'flipv‘滤镜，还有一个'fliph’滤镜。在其他浏览器中，它将创建一个canvas标签并使用drawImage。尽管Elijah的回答可能支持相同的浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3307550|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/reflect^0|4|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Take a look at one of the many <a href="http://plugins.jquery.com/project/reflect" rel="nofollow noreferrer">reflection.js</a> 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.

blocks|key|332468|text|如果只想翻转背景图像，可以在翻转的div中的内部元素上使用该类。基本上，您使用main+div翻转内部元素，但将每个元素都翻转回来。无论如何，在Firefox中都能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332469|如下所示：|332470|<div+id="container"+class="flip-horizontal">+
<h3+class="flip-horizontal">Hello+There!</h3>
<p+class="flip-horizontal">Here+is+some+text
</div>|code-block|syntax|javascript|332471|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

Like this:

<pre><code>&lt;div id="container" class="flip-horizontal"&gt; &lt;!-- container would have your background image --&gt;
&lt;h3 class="flip-horizontal"&gt;Hello There!&lt;/h3&gt;
&lt;p class="flip-horizontal"&gt;Here is some text&lt;/p&gt;
&lt;/div&gt;
</code></pre>

blocks|key|333803|text|我在尝试修复一个bug时发现了这个答案，虽然建议的答案是正确的，但我发现它违反了大多数现代CSS+Linting规则，即包含转换的所有供应商规则。但是，包含-ms-transform规则会在IE9中产生一个奇怪的bug，它会应用过滤器和-ms-transform规则，从而导致图像再次翻转。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333804|这是我建议的改进，它也支持CSS+Lint规则：|333805|.flip-horizontal+{
++++-moz-transform:+scaleX(-1);
++++-webkit-transform:+scaleX(-1);
++++-o-transform:+scaleX(-1);
++++-ms-transform:+scaleX(1);+/*+linting+rule+fix+%2B+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+%2B+IE9+fix+*/
++++transform:+scaleY(-1);
++++-ms-filter:+flipv;
++++filter:+flipv;
}|code-block|syntax|javascript|333806|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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. 

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

<pre><code>.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;
}
</code></pre>

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

Flip image like this:

<pre><code>AABBCC CCBBAA
AABBCC -&gt; CCBBAA
</code></pre>

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 <a href="http://forums.mozillazine.org/viewtopic.php?f=38&amp;t=512627&amp;start=0&amp;st=0&amp;sk=t&amp;sd=a" rel="noreferrer">MozillaZine</a> which I'm not confident that it'll work cross-browser.

Cross-browser way to flip html/image via Javascript/CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有一种库/简单的方法来翻转图像？像这样翻转图像：AABBCC      CCBBAAAABBCC  ->  CCBBAA我不是在找动画，只是翻转图像。我在谷歌上搜索了一下没有，只找到了一个复杂的版本，它在上使用了SVG，我不确定它是否能跨浏览器工作。

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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