[英]Cross-browser way to flip html/image via Javascript/CSS?
Is there a library/simple way to flip an image? 是否有图书馆/简单的方式来翻转图像?
Flip image like this: 像这样翻转图像:
AABBCC CCBBAA
AABBCC -> CCBBAA
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 MozillaZine which I'm not confident that it'll work cross-browser. 我已经google到没有avial,只发现了一个在MozillaZine上使用SVG的复杂版本,我不相信它会跨浏览器工作。
The following CSS will work in IE and modern browsers that support CSS transforms. 以下CSS将适用于支持CSS转换的IE和现代浏览器。 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;
}
Take a look at one of the many reflection.js type libraries, They are pretty simple. 看看很多reflection.js类型库中的一个,它们非常简单。 In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too.
在IE中,他们将使用'flipv'过滤器,也有一个'fliph'过滤器。 Inside of other browsers, it will create a canvas tag and use the drawImage.
在其他浏览器中,它将创建一个canvas标签并使用drawImage。 Although Elijah's answer probably supports the same browsers.
虽然以利亚的答案可能支持相同的浏览器。
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. 在尝试修复错误的同时挖出这个答案,而建议的答案是正确的我发现它打破了关于包含变换的所有供应商规则的大多数现代CSS Linting规则。 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.
但是,包括-ms-tranform规则会导致IE9中出现奇怪的错误,它会应用滤镜和-ms-transform规则,导致图像再次翻转和翻转。
Here is my suggested improvement which also supports CSS Lint rules: 这是我建议的改进,它也支持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;
}
If you only want to flip a background image you can use the class on the internal elements inside a flipped div. 如果您只想翻转背景图像,可以使用翻转div内部元素上的类。 Basically you're flipping the internal elements with the main div, but flipping each of them back.
基本上你是用主div翻转内部元素,但是将它们翻转回来。 Works in Firefox anyway.
无论如何都适用于Firefox。
Like this: 像这样:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.