跨浏览器的方式来通过Javascript / CSS翻转html / image？

73

有没有一种库/简单的方式来翻转图像？

像这样翻转图像：

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

我毫不费力地搜索，只发现了一个在MozillaZine上使用SVG的复杂版本，我不确定它是否可以跨浏览器使用。

javascript css image-manipulation

— Chakrit
source

是否有原因您不能简单地拥有图像的两个副本？

— cwallenpoole

3

@Christopher W.Allen-Poole。图像是由用户提供的，没有服务器端组件...只有一个以XML数据文件作为后端的HTML ...所以我只有JS / CSS可以翻转它们...如果可以自动执行，除了编辑XML之外，教它们也是一件更少的事……

— chakrit

193

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

— 埃利·格雷（Eli Gray）
source

3

请不要忘记-o-transform: scale(-1,0);和-o-transform: scale(0,-1); dev.opera.com/articles/view/css3-transitions-and-2d-transforms

— Jakob Cosoroaba

谢谢。我添加了Opera转换。

— 伊莱·格雷

3

不需要-ms-filter: "FlipH"吗？

— Ebrahim Mohammadi

@EliGrey这个（或类似的东西）也可以通过Firefox的Scratchpad吗？也就是说，我正在寻找一种轻量级的方式来编辑实时HTML / CSS（不使用占用大量资源的Firebug）。

— 关于natty的坚果，

谢谢你请注意，（使用Chrome）我还必须确保它不在嵌入式元素上。使用display：inline-block为我修复它。

— Damien Sawyer 2013年

3

看一下许多reflection.js类型库之一，它们非常简单。在IE中，他们将使用并使用“ flipv”过滤器，也有一个“ fliph”过滤器。在其他浏览器内部，它将创建一个canvas标记并使用drawImage。尽管以利亚的答案可能支持相同的浏览器。

— 纳尔夫
source

2

只是在尝试修复错误时挖出了这个答案，而建议的答案是正确的，我发现它违反了有关将所有供应商规则包括在内的大多数现代CSS Linting规则。但是，包含-ms-transform规则会导致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;
}

— 戴夫·斯托里
source

-3

如果只想翻转背景图像，则可以在翻转的div内的内部元素上使用类。基本上，您是通过main 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>

— 杰森·贝利（Jason Bailey）
source