マルチブラウザミラーリバースCSSエフェクトをサポート_html/css_WEB-ITnose

今日は、写真の鏡像を取得したいというリクエストを受けました。元々はバックグラウンド処理でしたが、実装が技術的に難しいことに加えて、各画像のコピーを保存するのと同じことになるため、リソースの消費の問題も発生しました。

以前、これを実現するために CSS フィルターを使用したことを思い出しましたが、それは IE でのみ機能しました。その後、複数のブラウザと互換性のあるスタイルを見つけて、とても気に入っています。

CSS スタイル定義:

.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 引用例:

<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" />