web-dev-qa-db-ja.com

Javascript / CSSを介してhtml / imageを切り替えるためのクロスブラウザーの方法？

画像を反転するライブラリ/簡単な方法はありますか？

次のような画像を反転します。

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

アニメーションを探していません、画像を反転させます。

私は鳥小屋をグーグルで検索しましたが、SVGを MozillaZine で使用した複雑なバージョンのみを見つけました。

javascriptcssimage-manipulation
72
chakrit

次のCSSは、IEおよびCSS変換をサポートする最新のブラウザーで動作します。使用する場合に備えて、垂直フリップクラスを含めました。

.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;
}
192
Eli Grey

多くの reflection.js タイプライブラリの1つを見てください。それらは非常に単純です。 IE 'flipv'フィルターを使用します。'fliph 'フィルターもあります。他のブラウザーの内部では、canvasタグを作成し、drawImageを使用します。Elijahの答えはおそらく同じブラウザをサポートしています。

3
gnarf

バグを修正しようとしてこの答えを掘り当てたところ、提案された答えは正しいものの、トランスフォームのすべてのベンダールールを含めることに関する最新のCSSリンティングルールに違反することがわかりました。ただし、-ms-tranformルールを含めると、IE9で奇妙なバグが発生し、フィルターと-ms-transformルールが適用され、画像が反転し、再び反転します。

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;
}
2
Dave Storey