跨浏览器的方式翻转html/图像通过Javascript/CSS？
跨浏览器的方式翻转html/图像通过Javascript/CSS？
提问于 2009-08-20 21:53:08
有没有一种库/简单的方法来翻转图像？
像这样翻转图像：
AABBCC CCBBAA
AABBCC -> CCBBAA我不是在找动画，只是翻转图像。
我在谷歌上搜索了一下没有，只找到了一个复杂的版本，它在MozillaZine上使用了SVG，我不确定它是否能跨浏览器工作。
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-08-20 22:51:42
以下CSS将在IE和支持CSS转换的现代浏览器中工作。我包含了一个垂直翻转类，以防你也想用它。
.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;
}Stack Overflow用户
发布于 2009-08-20 22:53:45
看看众多reflection.js类型库中的一个，它们非常简单。在IE中，他们将使用'flipv‘滤镜，还有一个'fliph’滤镜。在其他浏览器中，它将创建一个canvas标签并使用drawImage。尽管Elijah的回答可能支持相同的浏览器。
Stack Overflow用户
发布于 2014-03-12 22:03:03
我在尝试修复一个bug时发现了这个答案，虽然建议的答案是正确的，但我发现它违反了大多数现代CSS Linting规则，即包含转换的所有供应商规则。但是，包含-ms-transform规则会在IE9中产生一个奇怪的bug，它会应用过滤器和-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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1309055
复制相关文章
相似问题