跨浏览器的方式通过Javascript / CSS翻转html /图像？ [英] Cross-browser way to flip html/image via Javascript/CSS?

问题描述

是否有图书馆/翻转图片的简单方法？

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

翻转图片：

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

我已经搜索到没有avial，只找到一个复杂的版本，使用SVG在 MozillaZine 我不相信它会工作，

I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.

推荐答案

以下CSS将在支持CSS变换的IE和现代浏览器中正常工作。我包括一个垂直翻转类，以防你也想使用它。

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.

.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;
}

这篇关于跨浏览器的方式通过Javascript / CSS翻转html /图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！