ホームページ  >  記事  >  ウェブフロントエンド  >  マルチブラウザミラーリバースCSSエフェクトをサポート_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:42:081430ブラウズ

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

以前、これを実現するために 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" />

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。