Question

是否有图书馆/简单的方式来翻转图像？

像这样翻转图像：

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

我已经google到没有avial，只发现了一个在MozillaZine上使用SVG的复杂版本，我不相信它会跨浏览器工作。

Answer 1

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

Answer 2

查看众多reflection.js类型库中的一个，它们非常简单。在IE中，他们将使用'flipv'过滤器，也有一个'fliph'过滤器。在其他浏览器中，它将创建一个canvas标签并使用drawImage。虽然以利亚的回答可能支持相同的浏览器。

Answer 3

在尝试修复错误的同时挖出这个答案，而建议的答案是正确的我发现它打破了关于包含变换的所有供应商规则的大多数现代CSS Linting规则。但是，包括-ms-tranform规则会导致IE9中出现奇怪的错误，它会应用滤镜和-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;
}

Answer 4

如果您只想翻转背景图像，可以使用翻转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>

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

4 个答案: