ホームページ > 記事 > ウェブフロントエンド > マルチブラウザミラーリバース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" />