Support multi-browser mirror reverse css effect_html/css_WEB-ITnose

Today I received a request to get a mirror image of a picture. Originally it was background processing, but in addition to being technically difficult to implement, it also brought about the problem of resource consumption, which is equivalent to storing a copy of each picture.

I just remember that I have used CSS filters to achieve this before, but it only works under IE. Later I found a style that is compatible with multiple browsers, and I love it.

css style definition:

.flip-horizontal {     -moz-transform: scaleX(-1);     -webkit-transform: scaleX(-1);      -o-transform: scaleX(-1);     transform: scaleX(-1);     filter: fliph; /*IE*/ }.flip-vertical {     -moz-transform: scaleY(-1);     -webkit-transform: scaleY(-1);     -o-transform: scaleY(-1);     transform: scaleY(-1);     filter: flipv; /*IE*/ }

HTML quote example:

<img src="http://img.baidu.com/img/logo-zhidao.gif" class="flip-horizontal" /><img src="http://img.baidu.com/img/logo-zhidao.gif" class="flip-vertical" />